在angular2中的一个组件中添加多个templateUrl

发布时间：2020-12-17 17:08:28 所属栏目：安全来源：网络整理

导读：angular2允许使用反向标记(`)编写多行html代码. ?但是当使用templateUrl时,我不知道如何添加多个html文件. 当我试试这个.. @Component({ selector: 'my-app',template: ` h1view1/h1 h1view2/h2 `})class Appcomponent{} 像那样. @Component({ selector: 'my

angular2允许使用反向标记(`)编写多行html代码.
?但是当使用templateUrl时,我不知道如何添加多个html文件.

当我试试这个..

@Component({
  selector: 'my-app',template: `
           <h1>view1</h1>
           <h1>view2</h2>
            `
})

class Appcomponent{

}

像那样.

@Component({
  selector: 'my-app',templateUrl: './HTML1.html','./HTML2.html'


})

class Appcomponent{

}

与HTML1.html和HTML2.html一起使用

HTML1.html

<h1>view1</h1>

HTML2.html

<h1>view2</h1>

我可以在angular2中使用多个templateUrl吗？
谢谢你的时间阅读这个:)

解决方法

您不能添加多个HTML文件.我也看不出这会达到什么目的.

如果您的意图是,您可以使用* ngIf或* ngSwitchCase仅显示模板的部分内容

@Component({
  selector: 'my-app',template: `
           <h1 *ngIf="view == 'view1'>view1</h1>
           <h1 *ngIf="view == 'view2'>view2</h2>
           <button (click)="view = view == 'view1' ? 'view2' : 'view1'">toggle</button>
            `
})

class Appcomponent{
  view = 'view2';
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!