本文介绍了Angular 2:同一组件中的多个 HTML 页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 angular 2 的新手,我有一个名为 Register 的组件,在这 1 个组件中我有 5 个 HTML 页面,其中单击第一个注册页面我将转到第二个注册页面,单击第二个注册页面我将转到第三个注册页面.如何在 1 个组件中制作 5 个 HTML 页面我的意思是有没有办法为每个组件实现多个模板?怎么做路由?主要目的是拥有单独的 HTML &SCSS 文件和路由逻辑.
到目前为止,我正在使用 ngIf
渲染页面,这使我的页面变得非常冗长.有没有办法做到这一点?
<div class="open-card-BG" *ngIf="registerView=='regView1'">注册第 1 页
<!--视图 2--><div class="open-card-BG" *ngIf="registrationView=='regView2'">注册第 2 页
@成分({选择器:'注册页面',templateUrl: './register-page.component.html',styleUrls: ['./register-page.component.scss'],提供者:[RegisterService,Configuration,LocalStorageService]})ngOnInit() {this.registerView="regView1";}更改视图(视图){this.registerView=视图;}以前的视图(视图){this.registerView=视图;}
解决方案
尝试这样做:
@Component({选择器:'注册页面',模板:`<div class="open-card-BG" *ngIf="registerView == 'regView1'">Reg View 1 Content</div><div class="open-card-BG" *ngIf="registerView == 'regView2'">Reg View 2 Content</div>`,styleUrls: ['./register-page.component.scss'],提供者:[注册服务、配置、本地存储服务]})导出类 Appcomponent {registerView = 'regView1';}
其他就这样
page1.component.html
<h1>Page1 组件内容</h1>
page2.component.html
<h1>Page2组件内容</h1>
home.component.html
<div class="open-card-BG" *ngIf="registerView == 'regView1'"><app-page1-component></app-page1-component>
<div class="open-card-BG" *ngIf="registerView == 'regView2'"><app-page2-component></app-page2-component>
component.ts
@Component({选择器:'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css']})导出类 HomeComponent {registerView = 'regView1';}
I am new to angular 2, I have a component named Register, in this 1 component I have 5 HTML pages where one click of 1st register page I will go to the 2nd register page and on click of 2nd register page I will go to the 3rd register page. How can I make 5 HTML pages in 1 component I means is there a way to achieve multiple templates per component? How to do routing? The main intent is to have separate HTML & SCSS files and routing logic.
As of now I am rendering pages using ngIf
which has made my page very lengthy. Is there a way around to achieve this?
<!--View 1-->
<div class="open-card-BG" *ngIf="registerView=='regView1'">
Register Page 1
</div>
<!--View 2-->
<div class="open-card-BG" *ngIf="registrationView=='regView2'">
Register Page 2
</div>
@Component({
selector: 'register-page',
templateUrl: './register-page.component.html',
styleUrls: ['./register-page.component.scss'],
providers : [RegisterService,Configuration,LocalStorageService]
})
ngOnInit() {
this.registerView= "regView1";
}
changeView(view) {
this.registerView= view;
}
previousView(view) {
this.registerView= view;
}
解决方案
Try do like this :
@Component({
selector: 'register-page',
template: `
<div class="open-card-BG" *ngIf="registerView == 'regView1'">Reg View 1 Content</div>
<div class="open-card-BG" *ngIf="registerView == 'regView2'">Reg View 2 Content</div>
`,
styleUrls: ['./register-page.component.scss'],
providers: [RegisterService, Configuration, LocalStorageService]
})
export class Appcomponent {
registerView = 'regView1';
}
Else do like this
page1.component.html
<div>
<h1>Page1 Component Content</h1>
</div>
page2.component.html
<div>
<h1>Page2 Component Content</h1>
</div>
home.component.html
<div>
<div class="open-card-BG" *ngIf="registerView == 'regView1'">
<app-page1-component></app-page1-component>
</div>
<div class="open-card-BG" *ngIf="registerView == 'regView2'">
<app-page2-component></app-page2-component>
</div>
</div>
component.ts
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
registerView = 'regView1';
}
这篇关于Angular 2:同一组件中的多个 HTML 页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!