我是角度2的新手,我有一个名为Register的组件,在这1个组件中我有5个
HTML页面,其中一次点击第一个注册页面,我将进入第二个注册页面,点击第二个注册页面,我将转到第3个注册页面.如何在一个组件中制作5个HTML页面我的意思是有没有办法在每个组件上实现多个模板？如何做路由？主要意图是单独的HTML& SCSS文件和路由逻辑.
截至目前,我正在使用ngIf渲染页面,这使得我的页面非常冗长.有办法实现这个目标吗？
<!--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;
}
解决方法
尝试这样做：
@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>
`,providers: [RegisterService,LocalStorageService]
})
export class Appcomponent {
registerView = 'regView1';
}
否则这样做
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';
}
