Question

我可以将组件放入另一个组件模板吗？例如。使用选择器ImageBox和模板image声明组件<img src="a.png"/>并在另一个组件模板<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

当我们在component列表中写directives时听起来很奇怪，但这就是它的样子。

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：可以在另一个组件模板中使用组件吗？

3 个答案: