Question

我正在尝试基本上嵌套组件，我相信用我的代码解释会更容易。

基本上我有2个组件，我想以特定的方式在另一个组件中使用1个组件。以下是我设置它们的方法：

test.component.ts：

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

@Component( {
    selector: 'test',
    templateUrl: 'partials/test.html'
} )
export class TestComponent {
    constructor() {}
}

another.component.ts：

import { Component } from '@angular/core';
import { TestComponent } from './test.component';

interface Circle {
    show: boolean,
    data: any
}

@Component( {
    selector: 'another',
    directives: [ TestComponent ],
    templateUrl: '/partials/another.html'
} )
export class AnotherComponent {
    circles: Circle[] = [];

    constructor() {
        let testElement = document.createElement( 'test' ),
            defaultCircles = [
                { show: true, data: testElement }
            ];

        this.circles = defaultCircles;
    }
}

partials/another.html：

<ul>
    <li *ngFor="let circle of circles; let i = index">
        {{circle.data}} <!-- this just shows [object HTMLElement] -->
    </li>
</ul>

如何让它显示指令的内容？我尝试将data: testElement替换为data: '<test></test>'，但仍然无效，只显示文字<test></test>。

Answer 1

这可能有效：

<ul>
    <li *ngFor="let circle of circles; let i = index" [innerHTML]="circle.data">
    </li>
</ul>

Answer 2

我最后跟随关于Günter答案的评论，并提出了这个完全符合我需要的要点。

https://gist.github.com/wphax/14570328483baff3d8f79eab675704f2

如何在具有数据绑定的组件中使用指令？

2 个答案: