logo标签列表

ng-content在Angular2中对于引导组件无效。

angular
3
我已经创建了以下的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>

当页面加载时，“Some content here”会出现一会儿然后消失。我认为应该将其插入到ContentPage的模板中，而不是使用ng-content指令。当我更改页面模板时，输出也随之更改，因此肯定已应用。
有没有一种方法可以保留组件中标记的内容？
更新：
我想要实现的是在服务器上生成具有内容的HTML页面，然后只需添加动态功能。
由于内容按钮编辑实际上应该隐藏“Some content here”，并显示编辑页面控件，因此我正在考虑使用包含和的容器组件。
因此，模板或templateUrl不是选项。
1
请参阅 https://www.bennadel.com/blog/3146-you-cannot-project-static-content-into-the-root-component-in-angular-2-0-0.htm。 - yurzui
为什么不直接在定义content-page选择器的HTML中添加标记呢？ - user1752532
内容页的内容应该在服务器上创建。因此，我认为模板/templateUrl不是一个选项。 - Alex Netkachov
@yurzui 嗯...那很遗憾。 - Alex Netkachov
3个回答
2
您可以尝试以下方法：
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 示例

0
创建一个名为content-page.component.html的HTML文件作为您组件的HTML页面。该文件可以和您正在编写的组件位于同一文件夹中。然后在您的@Component中引用该HTML文件。
@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）需要在您的模块中声明并定义。
抱歉，这有点不符合我的目标。页面内容是一个维基页面，在服务器上渲染。因此，内容是不同的，并且取决于URL。 - Alex Netkachov
你现在所做的超出了组件化方法的范畴，你不能在选择器中嵌入内容。你应该将该选择器的逻辑嵌入到组件中。它“出现一会儿”的原因是因为那是组件加载的“时刻”。这就是你页面加载器应该放置的地方。听起来你需要创建一个管道。 - user1752532
另一方面，我所做的与搜索引擎优化和Angular官网http://angular.io是一致的 - 他们在服务器上生成页面，然后在其上添加动态内容。确实使用了组件。 - Alex Netkachov
你能提供一个链接吗？因为这似乎完全不符合要求。 - user1752532
-2

你忘了添加moduleId

@Component(
 { 
    **moduleId: module.id,**
    selector: 'content-page',
    template: '<ng-content></ng-content>' })
export class ContentPage {
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接