Angular 2:同一组件中的多个HTML页面 [英] Angular 2 : multiple HTML pages within same component

问题描述

我对Angle 2还是陌生的，我有一个名为Register的组件，在这1个组件中，我有5个HTML页面，其中单击第一个寄存器页面将转到第二个寄存器页面，而单击第二个寄存器页面则将转到第三注册页面.如何在1个组件中制作5个HTML页面，我的意思是有一种方法可以为每个组件实现多个模板?怎么做路由?主要目的是拥有单独的HTML& SCSS文件和路由逻辑.

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.

到目前为止，我正在使用ngIf渲染页面，这使我的页面非常冗长.有没有办法实现这一目标?

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;
      }

推荐答案

尝试这样做:

@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';
}

其他还是喜欢

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页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！