Angular2：组件可以在另一个组件模板中使用吗？

Question

我可以将组件放到另一个组件模板中吗？例如。使用选择器 image 和模板 <img src="a.png"/> 声明组件 ImageBox 并在另一个组件模板中使用它，例如 <div>Something there. And some image too <image></image></div> — 这可以做到吗？

Answer 1

这就是组件的用途

@Component({
  selector: 'image',
  template: '<img src="a.png"/>'
})
export class ImageBox {
}

@Component({
  selector: 'other',
  directives: [ImageBox],
  template: '<div>Something there. And some image too <image></image></div>'
})
export class OtherComponent {
}

您需要将组件和指令添加到要应用它们的组件的 directives 列表中。 Angular 然后使每个标签与 directives 中的一个组件的选择器相匹配这样一个组件。

Answer 2

你可以这样做

文件 1

import {Component} from 'angular2/core';
import {ImageBox}  from './file 2';


@Component({
    selector:   'my-app',
    template:   '<div>Something there. And some image too <selectorNameImageBox></selectorNameImageBox> </div>',
    directives: [ImageBox]
})

export class AppComponent { }

文件 2

@Component({
  selector: 'selectorNameImageBox',
  template: '<img src="a.png"/>'
})
export class ImageBox {
}

希望对你有所帮助

Answer 3

在 directives 列表中写 component 听起来很奇怪，但事实就是这样。

import {Component} from 'angular2/core';


@Component({
    selector:   'my-app',
    template:   '<div>hello <innerComponent></innerComponent></div>',
    directives: [InnerComponent]  
   // mistake point (component in directive list)
})

export class AppComponent { }


@Component({
  selector: 'innerComponent',
  template: '<img src="a.png"/>'
})
export class InnerComponent {
}

Angular2：组件可以在另一个组件模板中使用吗？

Angular2: can component be used inside another component template?

components

angular