Question

我已经创建了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页面，然后添加动态功能。

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

因此模板或templateUrl不是选项。

Answer 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

Answer 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>

你的＆＃34;选择器＆＃34; （content-page）需要从模块中定义/调用作为声明

Answer 3

您错过了添加moduleId

for town,country in places.items():
    print("{} in {}.".format(town.title(),country.title())
print("\n")

ng-content angular2对于botstrapped组件不起作用

3 个答案: