Question

我有一个拥有默认模板的组件：

    import {Component} from 'angular2/core';

    @Component({
        selector: 'my-component',
        template: `
            <div class="container">
                <div class="content">
                    <div *ngIf="contentRef.childNodes.length == 0">DEFAULT: <b>{{contentData}}</b></div>
                    <div #contentRef><ng-content select=".content"></ng-content></div>
                </div>
            </div>
        `
    })
    export class MyComponent {
        contentData = "DATA";
    }

我希望用户能够在使用它时为组件的某些部分指定自己的模板。所以它可以写成如下：

import {Component} from 'angular2/core';
    import {MyComponent} from './my.component';

    @Component({
        selector: 'my-app',
        directives: [MyComponent],
        template: `
            <my-component></my-component> 
            <br/>
            <my-component>
                <div class="content">
                    CUSTOM: <i>{{contentData}}</i>
                </div>
            </my-component>
        `
    })
    export class AppComponent { }

它产生以下标记：

<my-app>
        <my-component>
        <div class="container">
            <div class="content">
                <!--template bindings={}--><div>DEFAULT: <b>DATA</b></div>
                <div></div>
            </div>
        </div>
    </my-component> 
        <br>
        <my-component>
        <div class="container">
            <div class="content">
                <!--template bindings={}-->
                <div><div class="content">
                CUSTOM: <i></i>
            </div></div>
            </div>
        </div>
    </my-component>
    </my-app>

因此组件的'contentData'属性不会在自定义模板中呈现。是否有可能以某种方式为自定义模板提供特定的绑定上下文？或者是否有更好的方法来使用自定义用户模板实现案例？

Answer 1

How to realize website with hundreds of pages in Angular2显示了一种方法。

这不是官方解决方案，对我来说，目前看来这可能会在最终版本发布前破裂。 Angular2具有静态构建和解析绑定的强烈倾向。

您可以使用DynamicComponentLoader，也可以不使用Angulars绑定功能来动态添加内容。

Angular 2中组件的自定义用户模板

1 个答案: