Angular 2中@Component元数据directive属性不存在的报错问题

嗨，我刚碰到过类似的坑，很乐意为你解答！

你遇到的报错核心原因是：Angular 2及后续正式版本已经移除了@Component元数据里的directive属性，这个属性是AngularJS（1.x）或者极早期Angular 2测试版本的用法，现在正确的组件声明逻辑是通过NgModule来实现的。

步骤1：修正你的app.component.ts #

首先把@Component配置里的directive属性删掉，它已经不是合法的配置项了，如果要在模板里使用Navbar组件，记得把对应标签加上：

import { Component } from '@angular/core';
import { NavbarComponent } from './navbar.component';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
             <app-navbar></app-navbar>` <!-- 这里添加Navbar的组件标签 -->
})
export class AppComponent { 
  name = 'Angular'; 
}

步骤2：在根NgModule中声明NavbarComponent #

找到你的根模块文件（通常是app.module.ts），把NavbarComponent添加到declarations数组中——Angular要求所有组件、指令、管道都必须在NgModule里声明，框架才能识别并允许在模板中使用它们：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar.component'; // 导入Navbar组件

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent // 在这里声明你的Navbar组件
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

做完这两步，你的NavbarComponent就能正常在AppComponent的模板中渲染啦！

内容的提问来源于stack exchange，提问作者Striker