Angular 2：同一组件中的多个 HTML 页面答案

【问题标题】：Angular 2 : multiple HTML pages within same componentAngular 2：同一组件中的多个 HTML 页面
【发布时间】：2018-02-24 09:36:49
【问题描述】：

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

【问题讨论】：

您能更具体地说明您想要实现的目标吗？您似乎有一个包含不同 RegisterViews 的 RegisterPage 组件？您希望这些具有不同的模板/样式吗？因为如果它们在标记和样式方面不同，那么它们应该被分离为单个组件。如果它们的功能匹配，或者如果它们共享大量相同的代码，您可以创建类似于基础组件的东西，您可以从中扩展子视图。
对于每个 html 你应该创建一个新组件然后在 ngif 中你可以使用这个组件

标签： angular typescript angular2-routing angular2-template

【解决方案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';
}

【讨论】：

你能关闭这个答案吗？
app-page1-component 是未知元素.. 发生错误
app-page1-component 是组件的选择器及其对 module.ts 的声明
@Chandru 你能告诉我你是如何在 appModule.ts 中声明app-page1-component
@Chandru 正如 Ramkee 指出的那样，您的答案中缺少某些内容。我的结论是否正确，您的回答意味着我们应该创建 3 个组件 (ts + html)，即 home、page1 和 page2？

【解决方案2】：

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

【讨论】：

【解决方案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 {

   ...
}

【讨论】：

【解决方案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>

【讨论】：