Angular 2指令錯誤

我正在使用最終的Angular 2發行版本。我已經設置了官方網站angular 2 quickstart中提到的啓動文件。在我的app.component.ts文件中，我製作了2個組件。的代碼如下所示： -Angular 2指令錯誤

import { Component, OnInit} from '@angular/core'; 

@Component({ 
    selector: 'demo', 
    template:` 
     <h2>Hi, demo !!</h2> 
    ` 
}) 

export class DemoComponent implements OnInit{ 
    constructor(){} 

    ngOnInit(){ 

    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `<h1>My First Angular 2 App</h1> 
    <demo></demo> 
    ` 

}) 
export class AppComponent implements OnInit{ 
    constructor(){} 
    ngOnInit(){ 

    } 
}

在我的應用內的部件我用指令選擇器是一個數組。但編輯（VS Code）顯示錯誤。鍍鉻的控制檯拋出一個錯誤，告訴 模板解析錯誤：「演示」不是一個已知的元素：

請幫我解決這個問題。由於

這裏是我的app.module.ts文件

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [AppComponent, DemoComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

來源

2016-09-25 Yashwardhan Pauranik

您的模塊的declarations屬性來定義您的組件。

app.module.ts

import { AppComponent, DemoComponent } from './app.component'; 

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent, DemoComponent ], <== here 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

而且從AppComponentdirectives屬性中刪除它。它已被棄用。

app.component.ts

~~directives: [DemoComponent] ,~~

來源

2016-09-25 04:31:00 yurzui

不管你說我已經做到了。但它仍然顯示錯誤。 :( –

你忘了導入'DemoComponent' – yurzui

非常感謝，兄弟。它工作:) –

directives已棄用。創建一個NgModule並將其添加到declarations。

https://angular.io/docs/ts/latest/guide/ngmodule.html

來源

2016-09-25 04:31:19 Rob

我是新來的角2.所以你可以請詳細說明。 –

按照@ yurzui的例子來做一個快速修復，但是當你有機會的時候，請閱讀我發佈的文檔。我不能詳細說明文檔。 – Rob

需要聲明DemoComponent在聲明數組，並確保你從刪除declaration:[DemoComponent] AppComponent

FYI：聲明管道，組件，指令在@Component的指令元（{}）裝飾器已被刪除。該聲明不再存在。所以你遇到了一些問題。您需要在@NgModule（{}）裝飾器中聲明管道，指令和組件。

如果在同一個文件，你需要導入爲import { AppComponent,DemoComponent} from './app.component';

import {DemoComponent} from 'valid path';    //<<===here 
OR 
import {AppComponent, DemoComponent} from './app.component'; //<<===here 


@NgModule({ 
    imports:  [ BrowserModule], 
    declarations: [ AppComponent,DemoComponent],  //<<<====here 
    providers:[], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

來源

2016-09-25 04:33:24 micronyks

如果在同一個文件中需要將其作爲'./app.component'的import {ppComponent，DemoComponent} – micronyks

Angular 2指令錯誤

回答

相關問題