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

回答

相關問題