Question

在Angular 4中，假设您需要实现一个允许其用户在其中定义自定义内容的组件。

示例：

@Component({
    selector: "main-navigation",
    templateUrl: `
<md-sidenav-container>
    <md-sidenav mode="side" positio="start" opened="true">
        <md-nav-list>
            <a md-list-item *ngFor="let link of links" routerLink="{{link.url}}" routerLinkActive="active">{{link.text}}</a>
        </md-nav-list>
    </md-sidenav>

    <!-- Some placeholder for user's: content should go here -->

</md-sidenav-container>`
})

该组件的预期用途是这样的：

<main-navigation>
    <router-outlet></router-outlet> <!-- <- this is some user content -->
</main-navigation>

在Angular 4中创建这样一个占位符的最简单方法是什么？

Answer 1

将<ng-content></ng-content>添加到此处是您正在寻找的内容吗？

@Component({
    selector: "main-navigation",
    templateUrl: `
<md-sidenav-container>
    <md-sidenav mode="side" positio="start" opened="true">
        <md-nav-list>
            <a md-list-item *ngFor="let link of links" routerLink="{{link.url}}" routerLinkActive="active">{{link.text}}</a>
        </md-nav-list>
    </md-sidenav>

    <ng-content></ng-content> <!-- Some placeholder for user's: content should go here -->

</md-sidenav-container>`
})

这应该可以添加<router-outlet></router-outlet>以及用户在<main-navigation> </main-navigation>标记之间放置的任何内容。不确定这是否是你想要的行为，但如果你澄清更多，可能我可以重新评估我的答案。

Answer 2

作为@amal回答的进一步发展。

如果您想要命名占位符，可能的方法之一如下：

...
<ng-content select="content"></ng-content>
...

然后，你可以这样做：

<main-navigation>
    <content>
        <router-outlet></router-outlet>
    </content>
</main-navigation>

致this awesome post的信用。

在组件中创建一个placholder

2 个答案: