将Component模板中的模板与html页面内的代码组合在一起

Question

这是我在home.ts中的代码的一部分

@Component({
  selector: 'page-home',
  template: `
<ion-header><ion-navbar><ion-title>SheetJS Ionic Demo</ion-title></ion-navbar></ion-header>
<ion-content padding>
  <ion-grid>
  </ion-grid>
</ion-content>
`
})

根据我的理解，上面的代码将“覆盖”home.html中的所有代码。例如，虽然我的home.html里面有代码，

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

当呈现页面的时间到来时，将仅显示在home.ts内的模板下写入的部分。

所以我的问题是，有没有什么方法可以将home.ts中的模板下编写的代码与home.html中的代码结合起来？

意味着什么

@Component({
  selector: 'page-home',
  template: `
<ion-header><ion-navbar><ion-title>SheetJS Ionic Demo</ion-title></ion-navbar></ion-header>
<ion-content padding>
  <ion-grid>
   $ContentFromHtmlPage
  </ion-grid>
</ion-content>
`
})

所以$ ContentFromHtmlPage将替换为home.html内的代码。

就个人而言，我只是讨厌在模板中看到许多代码：``因为我认为它混淆了视图和代码的其他部分。

角度和离子是否可以实现这一点？

Answer 1

不，你不能直接做到，Angular不允许在templateUrl装饰器中组合template和@Component属性。无论如何，这似乎不合逻辑并且正在与框架作斗争。

但是框架本身实际上提供了一个解决方案（这就是为什么我们首先使用Angular的原因）。

创建另一个组件并在home.ts中放置您需要的html模板。

这样你

• 将解决您的问题
• 有一个可重用的组件 - 如果你需要在其他地方使用相同的模板怎么办？
• 关注点分离

参考你的评论 - 只需创建并注册（在@NgModule中）另一个组件。它将有一个选择器，您可以在另一个组件的html中使用它，如下所示：

<ion-content padding>
  <ion-grid>
   <some-other-component></some-other-component>
  </ion-grid>
</ion-content>