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

我是angular 2的新手，我有一个名为Register的组件，在这1个组件中我有5个HTML页面，其中第一个注册页面的一次点击我将进入第二个注册页面然后点击第二个注册页面，我将进入第三个注册页面。如何在1个组件中创建5个HTML页面我的意思是有没有一种方法可以为每个组件实现多个模板？如何做路由？主要目的是有单独的HTML & SCSS文件和路由逻辑。Angular 2：同一组件中的多个HTML页面

截至目前，我正在使用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; 
     }

来源

2017-09-15 Anna

你能更具体要达到什么样的？你似乎有一个RegisterPage组件，它拥有不同的RegisterViews？你想让这些有不同的模板/样式吗？因为如果它们在标记和样式上不同，那么它们应该作为单个组件分离。如果它们的功能匹配，或者它们共享大量相同的代码，则可以创建类似于基本组件的扩展子视图。 – lexith

为每个html你应该创建新组件，然后在ngif你可以使用这个组件 – porgo

在

Angularcomponents基本屏幕的补丁意味着应当总是为每个组件类单个模板。如果你想为单个组件类使用多个模板，那么根据术语，它并不涉及component definition。如果要使用，则创建一个base class并创建3 separatecomponent并扩展base类。

来源

2017-09-15 08:54:25

使用* 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 { 

    ... 
}

来源

2017-09-15 08:56:58 Plog

试着这样做：

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

来源

2017-09-15 09:06:20 Chandru

这工作:)谢谢 – Anna

你能关闭这个答案？ – Chandru

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

回答

相关问题