Невозможно добавить новый компонент в мое угловое приложение 2 с машинописными текстами

Question

Я использую Angle 2 CLI, и я создал компонент «MyComponent» с помощью . Насколько я знаю, что я должен добавить компонент в директиве ключ-значение пары в @Component декоратора, но машинописный сборник не может в этот момент, сказав, что:

ERROR in [default] /Users/Philip/Desktop/Angular2/src/app/app.component.ts:8:2 
Argument of type '{ selector: string; template: any; styles: any[]; directives: typeof MyComponentComponent[]; }' is not assignable to parameter of type 'Component'. 
    Object literal may only specify known properties, and 'directives' does not exist in type 'Component'. 

Это мой код для приложения :

import { Component } from '@angular/core'; 
import { MyComponentComponent } from './my-component/my-component.component' 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    directives: [MyComponentComponent], 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

Я не трогали код сгенерированного компонента, но только в том случае:

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

@Component({ 
    selector: 'app-my-component', 
    templateUrl: './my-component.component.html', 
    styleUrls: ['./my-component.component.css'] 
}) 

export class MyComponentComponent implements OnInit { 

    constructor() { 

    } 

    ngOnInit() { 
    } 

} 

Answer 1

сама ошибка говорит, что директивы сделать esn't нет вКомпонент, так как он устарел. попробуйте этот код, приведенный ниже,

import { MyComponentComponent } from './my-component/my-component.component' 
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; 

@NgModule({ 
    ... 
    ... 
    declarations:[AppComponent,MyComponentComponent], //<---need to declare 
    schemas:  [CUSTOM_ELEMENTS_SCHEMA]    //<---added this line 
}) 

И удалить директивы: [MyComponentComponent] из AppComponent.

Answer 2

Angular2 Декораторы компонентов больше не используют их для встраивания других компонентов. Вместо этого нам нужно будет использовать новые метаданные, называемые entryComponents. Ниже в качестве примера ...

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    entryComponents:[VehicleListComponent] 
}) 

Транспортное средство-список-компонент имеет следующие метаданные компонента ..

@Component({ 
    selector: 'app-vehicle-list', 
    templateUrl: './vehicle-list.component.html', 
    styleUrls: ['./vehicle-list.component.css'], 
    providers: [VehicleService] 
}) 

Answer 3

если использовать угловую CLI, то новый компонент будет автоматически импортированы и добавлены в раздел объявлений @ngmodule в app.module.ts. Для этого нам не нужно писать код.

Answer 4

У вас есть два варианта:

1: Используйте entryComponents тег внутри компонента

2: Использование угловой CLI, который автоматически импортирует его, поэтому мы не должны явно писать код для него.

Answer 5

НЕТ НУЖНО СДЕЛАТЬ С УГОЛОМ 4 или выше после запуска команды создания компонента. Вероятно, ошибка состоит в том, что вы не используете правильное селекторное имя из нового файла метаданных компонента (например, componentname.component.ts).