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>
`
})

根据我的理解，上面的代码将覆盖＆＃39; 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>

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

1 个答案: