Question

我是角度2的新手，我有一个名为Register的组件，在这1个组件中我有5个HTML页面，其中一次点击第一个注册页面我将进入第二个注册页面，点击第二个注册页面我会转到第3个注册页面。如何在一个组件中制作5个HTML页面我的意思是有没有办法在每个组件上实现多个模板？如何做路由？主要意图是单独的HTML＆amp; 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

尝试这样做：

@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 2

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

Answer 3

使用* ngIf是最明智的方法。如果它必须使用* ngIf来覆盖大量的HTML，那么它可能更多地表明它们应该是单独的组件，因为它们显然具有明显不同的视图。

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

export class BaseComponentLogic implements OnInit {

    ...

}

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

   ...
}

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

   ...
}

Answer 4

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

 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页面

4 个答案: