angular - ng-content angular 2 不适用于自举组件-6ren

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

转载作者：行者123 更新时间：2023-12-04 17:55:59

我按如下方式创建了 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，因为我在其中有 ng-content 指令。当我更改页面模板时，它会更改输出，因此肯定会应用它。

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

更新:

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

由于 content-button-edit 实际上应该隐藏“此处的一些内容”并显示编辑页面控件，所以我正在考虑使用包含和的容器组件。

所以 template 或 templateUrl 不是选项。

最佳答案

您可以尝试以下方法:

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

关于angular - ng-content angular 2 不适用于自举组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40325567/