it-swarm.com.de

Angular 2: mehrere HTML-Seiten in derselben Komponente

Ich bin neu bei angle 2, ich habe eine Komponente namens Register, in dieser 1 Komponente habe ich 5 HTML-Seiten, auf die mit einem Klick von der 1. Registerseite auf die 2. Registerseite und auf die 2. Registerseite geklickt wird 3. Registerseite. Wie kann ich 5 HTML-Seiten in einer Komponente erstellen? Gibt es eine Möglichkeit, mehrere Vorlagen pro Komponente zu erstellen? Wie mache ich Routing? Die Hauptabsicht besteht darin, separate HTML- und SCSS-Dateien und Routing-Logik zu haben.

Ab jetzt rendere ich Seiten mit ngIf, was meine Seite sehr langwierig gemacht hat. Gibt es einen Weg, dies zu erreichen?

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

Versuchen Sie es so: 

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

Else mag das  

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>

Komponente.ts

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

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

Bei Angularcomponents handelt es sich im Wesentlichen um einen Patch des Bildschirms, dh es sollte immer eine einzige Vorlage für jede Komponentenklasse vorhanden sein. Wenn Sie mehrere Vorlagen für eine einzelne Komponentenklasse verwenden möchten, verweist sie laut Terminologie nicht auf component definition. Wenn Sie verwenden möchten, erstellen Sie einen base class und erstellen Sie 3 separatecomponent und erweitern Sie die base-Klasse. 

1
Arun Redhu

Die Verwendung von * ngIf wäre der sinnvollste Weg, dies zu tun. Wenn Sie zu dem Punkt gelangen, dass Sie * ngIf verwenden müssen, um große HTML-Abschnitte abzudecken, ist dies wahrscheinlich eher ein Hinweis darauf, dass diese separaten Komponenten sein sollten, da sie deutlich unterschiedliche Ansichten haben.

Wenn in den .ts-Dateien viele gemeinsame Logik vorhanden ist, können Sie eine Klasse mit der gesamten gemeinsamen Logik erstellen und die Klassenvererbung für Ihre einzelnen Komponenten verwenden.

export class BaseComponentLogic implements OnInit {

    ...

}

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

   ...
}

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

   ...
}
0
Plog