typescript - Angular 2 - Wie man den Header ändert, wenn man zu einer anderen Route/einer anderen Seite wechselt (Anfängerniveau)

GELÖST

Ich habe einige Komponenten: - Home-Komponente, Standard-Header, Detail-Komponente, Detail-Header-Komponente
Beide Header haben unterschiedliche Layouts

Angenommen, auf der Startseite wird der 'Standard-Header' angezeigt,
Wenn der Benutzer auf der Detailseite ist, wird der 'Detail-Header' angezeigt

Meine Logik ist also, etwas if else in app.component.ts zu machen. Leider wird es nicht wie erwartet angezeigt.
Wie mache ich das in Angular2? Ich habe das Problem, den Header zu wechseln.

Dies ist meine app.component.ts

@Component({
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./main.css'],
  template: `
    <div class="main-body">
      <app-header *ngIf="!showHeaderB()"></app-header>
      <detail-header *ngIf="showHeaderB()"></detail-header>
      <div class="container">
        <small><api-error></api-error></div>
        <router-outlet></router-outlet>
      </div>
      <app-footer></app-footer>
      <template ngbModalContainer></template>
    </div>
  `
})

export class AppComponent {
  showHeaderB(){
    if (this.router.url.startsWith('/detail/')) {
      return true;
    } else {
      return false;
    }
  }
}

Antwort #1

Haben Sie einen Seitenkopf als separate Komponente.

@Component({
  selector: 'page-header',
  template: `
    <div> {{title}}</div> 
  `,
})
export class PageHeader {

  @Input() title:string="";

}

In jedem Ihrer Komponenten sollten Sie diese Komponente einfügen und ihr einen Titel zuweisen.

@Component({
  selector: 'component-1',
  template: `
    <div>
      <page-header title="pageTitle"> </page-header>
      ...
    </div>
  `,
})

export class Component1 {

pageTitle:string;

}

@Component({
  selector: 'component-2',
  template: `
    <div>
      <page-header title="pageTitle"> </page-header>
      ...
    </div>
  `,
})

export class Component2 {

pageTitle:string;

}

Antwort #2

Du solltest deine showHeaderB()-Methode in diese ändern

Sagen wir, dass Sie Ihre URL so haben localhost:8080/..../..../detail/.... Ihre Position von detail ist 4, also setzen Sie den Parameter für Position 4

showerHeaderB(){
    if (this.router.url.startsWith('/detail', 4)) {
        return true;
     } else {
            return false;
      }
    }