Question

我想知道Angular 2是否可以在库中创建自定义组件并在app.component.ts中使用它，如下所示：

app.component.ts
----------------
@Component({
    selector: 'my-app', 
    template:`<comp-a>
                <comp-b></comp-b>
                <comp-b></comp-b>
                <comp-b></comp-b>
               </comp-a>'

Answer 1

是的，它是可能的。只需编写一个新组件，将该组件放在您希望视图放置在那个地方的地方

实施例： -

<强>文件1： -

@Component({

    selector: 'custom-component',
    moduleId: module.id,
    templateUrl: 'custom.html'
})

export class LeavesComponent { }

<强> file2的： -

@Component({

    selector: 'custom-component',
    moduleId: module.id,
    template: `<div> 
                   <custom-component></custom-component>
                    //you can add more files same like
               </div>`
})

export class ParentComponent { }

Answer 2

我找到了答案！使用Angular 2，您可以使用<ng-content>元素。

compA.component.ts
----------------
@Component({
    selector: 'comp-a', 
    template:`<div>
                <ng-content></ng-content>
               </div>'

app.component.ts
----------------
@Component({
    selector: 'my-app', 
    template:`<comp-a>
                <comp-b></comp-b>
                <comp-b></comp-b>
                <comp-b></comp-b>
               </comp-a>'

在Angular 2中，是否可以在其他组件中插入自定义组件？

2 个答案: