Angular 2 : 同一组件内的多个 HTML 页面

Question

我是 angular 2 的新手，我有一个名为 Register 的组件，在这个 1 组件中我有 5 个 HTML 页面，点击第一个注册页面我将转到第二个注册页面页面并单击第二个注册页面，我将转到第三个注册页面。如何在 1 个组件中制作 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;
      }

Answer 1

在 Angular components 中基本上是屏幕的补丁意味着每个组件应该始终有一个模板 class。如果您想为单个组件使用多个模板 class，那么根据术语，它不涉及 component definition。如果要使用，则创建一个 base class 并创建 3 个 separate component 并扩展 base class。

Answer 2

使用 *ngIf 是最明智的方法。如果它到了你不得不使用 *ngIf 来覆盖大块 HTML 的地步，那么它可能更多地表明这些应该是独立的组件，因为它们显然有明显不同的观点。

如果您的 .ts 文件中有很多共享逻辑，您可以创建一个包含所有共享逻辑的 class 并在您的各个组件上使用 class 继承。

export class BaseComponentLogic implements OnInit {

    ...

}

@Component({...})
export class MyFirstComponent extends BaseComponentLogic implements OnInit {

   ...
}

@Component({...})
export class MySecondComponent extends BaseComponentLogic implements OnInit {

   ...
}

Answer 3

尝试这样做：

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

Answer 4

如果您的组件逻辑几乎相同并使用 ngIf 指令 将它们显示在 * 单个 html 文件中各种 html 个文件，您可以执行以下操作：

import { Component, OnInit } from '@angular/core'; import {Router, ActivatedRoute, Params} from '@angular/router'; @Component({ selector: 'app-registration', templateUrl: './registration.component.html', styleUrls: ['./registration.component.css'] }) export class RegistrationComponent implements OnInit { constructor(private activatedRoute: ActivatedRoute) { } abcde:string=''; ngOnInit(): void { //fetch query string and set value of variable this.activatedRoute.queryParams.subscribe(params => { this.abcde=params['xyz']; }); } }

在 html 文件中，

<div *ngIf="abcde=='1'"> your stuff </div> <div *ngIf="abcde=='2'"> your stuff </div> <div *ngIf="abcde=='3'"> your stuff </div>

Angular 2 : 同一组件内的多个 HTML 页面

Angular 2 : multiple HTML pages within same component

typescript

angular2-template

angular2-routing

angular