ng-content angular 2 不适用于自举组件答案

【问题标题】：ng-content angular2 does not work for botstrapped componentng-content angular 2 不适用于自举组件
【发布时间】：2016-10-30 02:37:36
【问题描述】：

我已经按如下方式创建了 ContentPage 组件：

@Component({ selector: 'content-page',
  template: '<ng-content></ng-content>' })
export class ContentPage {
}

然后在模块中引导它：

@NgModule({
    imports:      [ BrowserModule ],
    declarations: [ ContentPage ],
    bootstrap:    [ ContentPage ]
})
export class AppModule { }

页面模板为：

<!DOCTYPE html>
<html>
  ... angular2 quickstart head ...
  <body>
    <div class="container" style="padding-top: 20px">
      <content-page>
        <div style="float: right; width: 150px">
          <content-button-edit></content-button-edit>
        </div>
        <div data-page-id="{{page-id}}">
          Some content here
        </div>
      </content-page>
    </div>
  </body>
</html>

当页面加载时，“这里有一些内容”会出现片刻然后消失。我想应该在 ContentPage 的模板中插入它而不是 ng-content，因为我在其中有 ng-content 指令。当我更改页面模板时，它会更改输出，因此肯定会应用它。

有没有办法保留组件的标记内容？

更新：

我想要实现的是在服务器上生成带有内容的 HTML 页面，然后添加动态功能。

由于内容按钮编辑实际上应该隐藏“此处的某些内容”并显示编辑页面控件，因此我正在考虑使用同时包含和的容器组件。

因此 template 或 templateUrl 不是选项。

【问题讨论】：

另见bennadel.com/blog/…
为什么不在定义 content-page 选择器的 html 中添加标记？
内容页面的内容应该在服务器上创建。所以我认为 template/templateUrl 不是选项。
@yurzui 嗯...这很可悲。

标签： angular

【解决方案1】：

您可以尝试以下方法：

app.component.ts

@Component({
  selector: 'content-page',
  template: document.querySelector('content-page').innerHTML
})
export class AppComponent { 
  pageId = 1;
}

index.html

<div class="container" style="padding-top: 20px">
  <content-page>
    <div style="float: right; width: 150px">
      <content-button-edit></content-button-edit>
    </div>
    <div [attr.data-page-id]="pageId">
      Some content here
    </div>
  </content-page>
</div>

见Plunker Example

【讨论】：

【解决方案2】：

为您的组件创建一个 html 页面作为 html 文件。 content-page.component.html。这可以在您正在编写的组件的同一文件夹中。然后在你的@Component

@Component({ 
     moduleId: module.id,
     selector: 'content-page',
     templateUrl: 'content-page.component.html' 
})
  export class ContentPage {}

然后在你的content-page.html

<div style="float: right; width: 150px">
   <content-button-edit></content-button-edit>
 </div>
 <div data-page-id="{{page-id}}">
    Some content here
 </div>

您的“选择器”(content-page) 需要作为声明从您的模块中定义/调用

【讨论】：

对不起，这有点不符合我想要实现的目标。页面内容是一个 wiki 页面，在服务器上呈现。所以内容是不同的，取决于 URL。
好吧，您现在所做的超出了基于组件的方法的范围，您不能将内容嵌入到选择器中。您将该选择器的逻辑嵌入到组件中。 .它“出现片刻”的原因是因为那是“组件加载的时刻。那是你的页面加载器应该在的地方。听起来你需要创建一个管道
另一方面，我正在做的是内联搜索引擎优化和 Angular 自己的网站angular.io - 他们在服务器上生成页面，然后在其上添加动态。确实有组件。
你能提供一个链接吗，因为这似乎根本不是内联的

【解决方案3】：

你错过了添加 moduleId

@Component(
 { 
    **moduleId: module.id,**
    selector: 'content-page',
    template: '<ng-content></ng-content>' })
export class ContentPage {
}

【讨论】：