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

问题描述

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