Как поместить компонент внутри другого компонента в Angular2?

Я новичок в угловых и я все еще пытаюсь понять это. Я следил за курсом по виртуальной академии Microsoft, и это было здорово, но я нашел небольшое несоответствие между тем, что они сказали, и как ведет себя мой код! В частности, я попытался "поместить компонент внутри другого компонента" следующим образом:

@Component({
    selector: 'parent',
    directives: [ChildComponent],
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}


@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

это тот же пример, который они делают на курсе, но в моем коде не работает! В частности, VisualStudio говорит мне, что свойство "директивы" не делает существует в компонентном декораторе. Как я могу это решить?

16
angular angular2-directives

3 ответов

вы не ставить компонент directives

вы Регистрация его в @NgModule объявления:

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , MyChildComponent ],
  bootstrap: [ App ]
})

и затем вы просто помещаете его в шаблон HTML родителя как:<my-child></my-child>

вот и все.

23

Я думаю, что в вашей угловой-2 версии директивы не поддерживаются в компонентном декораторе, поэтому вам нужно директива Register то же, что и другой компонент в @NgModule и затем импортировать в компонент, как показано ниже, а также удалить directives: [ChildComponent] от оформителя.

import {myDirective} from './myDirective';
3

если вы удалите атрибут директив, он должен работать.

@Component({
    selector: 'parent',
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}


@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

директивы подобны компонентам, но они используются в атрибутах. У них также есть Декларатор @Directive. Вы можете узнать больше о директивах Структурные Директивы и Директивы Атрибут.

есть два других вида угловых директив, подробно описанных в другом месте: (1) компоненты и (2) директивы атрибута.

A компонент управляет областью HTML в манере собственного HTML элемент. Технически это директива с шаблоном.

также, если вы откроете глоссарий, вы можете найти, что компоненты также являются директивами.

директивы попадаете в одну из следующих категорий:

  • компоненты объединить логику приложения с HTML-шаблоном для визуализации представлений приложений. Компоненты обычно представлены в виде HTML элементы. Они являются строительными блоками углового применения.

  • директивы атрибут можно слушать и изменять поведение других HTML-элементов, атрибутов, свойств и компонентов. Они обычно представлен в виде атрибутов HTML, отсюда и название.

  • структурные директивы ответствены для формировать или переформовать план HTML, типично мимо добавление, удаление или управление элементами и их детей.

разница в том, что компоненты имеют шаблон. См.Угловое Архитектуры обзор.

директива класс @Directive оформителя. Компонент-это директива-с-шаблоном; a @Component оформителя на самом деле @Directive декоратор расширен с функциями, ориентированными на шаблон.

на @Component метаданные не имеют . См.компонентный декоратор.

1