web-dev-qa-db-fra.com

Angular 2: plusieurs pages HTML dans le même composant

Je suis nouveau sur angular 2, j’ai un composant nommé Register, dans ce composant, j’ai 5 pages HTML où un clic sur la 1ère page du registre je vais aller à la 2ème page du registre et sur le 2ème page du registre, 3ème page de registre. Comment créer 5 pages HTML dans 1 composant? Cela signifie-t-il qu'il est possible d'obtenir plusieurs modèles par composant? Comment faire le routage? L'intention principale est d'avoir des fichiers HTML et SCSS séparés et une logique de routage.

A partir de maintenant, je réalise le rendu des pages en utilisant ngIf, ce qui a rendu ma page très longue. Y a-t-il un moyen de contourner ce problème?

<!--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
4
Anna

Essayez de faire comme ça: 

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

Sinon faire comme ça  

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>

composant.ts 

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})

export class HomeComponent {
    registerView = 'regView1';
}
5
Chandru

Dans Angularcomponents, un patch de l’écran signifie qu’il devrait toujours y avoir un modèle unique pour chaque classe de composants. Si vous souhaitez utiliser plusieurs modèles pour une classe de composant unique, alors selon la terminologie, il ne fait pas référence à component definition. Si vous souhaitez utiliser, créez un base class et créez 3 separatecomponent et étendez la classe base. 

1
Arun Redhu

Utiliser * ngIf serait le moyen le plus judicieux de le faire. Si vous devez utiliser * ngIf pour couvrir de gros morceaux de code HTML, cela signifie probablement que ces composants doivent être séparés, car ils ont des points de vue nettement différents.

S'il existe beaucoup de logique partagée dans vos fichiers .ts, vous pouvez créer une classe avec toute la logique partagée et utiliser l'héritage de classe sur vos composants individuels.

export class BaseComponentLogic implements OnInit {

    ...

}

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

   ...
}

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

   ...
}
0
Plog