Question

是否可以渲染app-nav标记内的html，而不是在templateUrl中提供？

@Component({
  selector: 'app-nav',
  // commented out - templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
  title: string = 'This is my title';
}

html页面上已有的Html。

<app-nav>
  nav works! {{ title }}
</app-nav>

如果我取消注释templateUrl，那么app-nav将被nav-component.html页面取代，但我不希望这样。我有动态HTML，我想渲染它。

Answer 1

您可以在ngTemplateOutlet投影中使用嵌入式视图。将您的内容包含在<app-nav>中的<template>代码中。在NavComponent中找到TemplateRef ContentChild，并将此templateRef插入到组件的模板中，并将包含您的标题变量的上下文传递给它。像这样：

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
  title: string = 'This is my title';

  @ContentChild('defaultTemplate') defaultTemplate = null // get templateRef
}

在nav.component.html中创建具有相对模板上下文的模板插座

<template [ngOutletContext]="{ title: title }" [ngTemplateOutlet]="defaultTemplate"></template>

....other component content....

然后代替组件使用：

<app-nav>
  <template #defaultTemplate let-title="title">
    nav works! {{ title }}
  </template>
</app-nav>

<强> UPD：

这是一个plunk示例

<{1>} app/some.component.ts来自ngTemplateOutlet app/app.component.ts的{{1}}投影

<强> UPD：

好的，有一种方法可以将index.html的初始内容添加到组件中。您可以使用将在初始化应用程序时执行的template函数。

以下是plunk

请参阅APP_INITIALIZER
在app/root-template.initializer.ts我只是用初始内容替换相关属性。这有点hacky方式，应该通过替换使用Reflect.getMetadata获得的app/app.component.ts中的模板来完成：
```
ComponentMetadata
```

这样，组件模板将具有初始索引内容，并且将通过angular解析。有关反映here

Answer 2

@Yaroslav，扩展您的解决方案：

看起来像是一个翻译（在Angular 1术语中），所以在Angular 2中你可以在内部组件上使用ng-content。
```
<div class="my-component">
  <ng-content></ng-content>
</div>
```
要对外部转换标记进行插值处理，请为该元素指定一个id，并为其插入内插前缀。
```
<my-component #comp>
  This is my transcluded content! ++{{comp.title}}++
</my-component>
```
请勿尝试从 index.html 转换，它不是角度组件，所以它似乎不像外部组件那样工作。如果你使用app.component作为外部，另一个my.component作为内部，它可以工作。

这里是你的傻瓜的一个分叉。 plnkr

作为参考，我使用了Todd Motto关于角度2转换的优秀文章：ref here。
角度指南只是模糊地指的是ng-content（带有404＆＃39;的链接），所以我想知道它是否会消失。可能会被 ngComponentOutlet ref here

Angular2组件 - 从索引页面呈现html

2 个答案: