web-dev-qa-db-ja.com

Angular 2：同じコンポーネント内の複数のHTMLページ

angular 2、Registerというコンポーネントがあります。この1つのコンポーネントには5つのHTMLページがあり、最初の登録ページを1回クリックすると2番目の登録ページに移動し、クリックすると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;
      }
angulartypescriptangular2-routingangular2-template
8
Anna

このようにしてみてください：

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

Angularcomponentsは基本的に画面のパッチであり、各コンポーネントクラスに常に単一のテンプレートが必要であることを意味します。単一のコンポーネントクラスに複数のテンプレートを使用する場合、用語ではcomponent definitionを参照しません。使用する場合は、base classを作成し、3つのseparatecomponentを作成し、baseクラスを拡張します。

4
Arun Redhu

これを行うには、* 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 {

   ...
}
1
Plog