Wie setze ich Header für jede Seite mit Komponente in Angular 1.5

Question

Ich begann vor kurzem mit Angular 1.5-Komponente. Ich habe verschiedene Seiten in meiner Anwendung. Also entschied ich mich, eine <my-title> Komponente zu erstellen, die innerhalb <my-header> Komponente verwendet. Wie Sie in der Navigationsleiste sehen, habe ich Erste, Zweite als Navigationslinks. In meiner Bewerbung wird es mehr Eltern Kind Kombinationen geben.

Ich möchte den Titel jeder Seite auf zwei Arten festlegen.

1. Indem sie in Teil <my-title>Home</my-title> (siehe 1.html oder 2.html) (Manuel Antwort befriedigt dieses Szenario)
2. Auch würde Ich mag es, wie auch von der Steuerung eingestellt werden. vm.title = "current page title" (akzeptierte Antwort befriedigt dieses Szenario nur)

Ich denke, eine Sache von oben zwei Optionen. Es gibt zwei Antworten von verschiedenen Personen für Option 1 (Deblaton) und Option 2 (Manuel). Beide Antworten erfüllen die jeweiligen Szenarien. Ich habe akzeptiert, wer zuerst richtig geantwortet hat.

Aktualisiert: Wenn Sie Datei "1.html" auf Plunker sehen. Ich versuche <my-title> First page</my-title> einzustellen. aber das funktioniert nicht. Meine Schlüsselidee ist, dass der Entwickler <my-title>Current Page Title</my-title> nur teilweise geben wird und es wird wie pro aktuelle Seite angezeigt, wenn er über navigiert.

Bitte beachten Sie, ich werde nur <my-title> zu teilweise und Controller ausgesetzt sein. <my-header> wird nur an einem Ort sein. Nur Titel wird geändert. Wenn es neue Seiten gibt, werden Navigationslinks zu <my-header> hinzugefügt.

Es gibt viel Code zum Kopieren-Einfügen hier. Bitte besuchen Sie diese PLUNKER.

module.component('myFirstApp', { 
    templateUrl: "mainview.html", 
    $routeConfig: [ 
    {path: '/', redirectTo: ['/First'] }, 
    {path: '/first', name: 'First', component: 'firstComponent'}, 
    {path: '/second', name: 'Second', component: 'secondComponent'} 
    ] 
}) 

module.component('firstComponent', { 
    templateUrl: "1.html" 
}); 

module.component('secondComponent', { 
    templateUrl: "2.html" 
}); 

module.component('myTitle', { 
    template: '<h1>{{model.title}}</h1>' 
}); 

module.component('myHeader', { 
    templateUrl: "my-header.html" 
}); 

Answer 1

Für mich Komponente Routing verwenden, sieht es wie eine gute Idee, einen Controller für den Umgang mit Ihrem Titel zu verwenden. (mit UI-Router hätte ich die Auflösungsoption verwendet).

Ich entschied mich, $ rootScope zu injizieren und es für die Freigabe des Titelwerts zu verwenden. Sie können es auch mit einem Service machen.

so die Komponente:

module.component('firstComponent', { 
    templateUrl: "1.html", 
    controller: ["$rootScope", function($rootScope){ 
    $rootScope.appVars = $rootScope.appVars || {}; 
    $rootScope.appVars.title = "Title from Page 1"; 
    }] 
}); 

und die Richtlinie:

module.component('myTitle', { 
    template: '<h1>{{$root.appVars.title}}</h1>' 
}); 

Hier ist die aktualisierte plnkr: https://plnkr.co/edit/6PCfznxsJzCPQtBm2oyN?p=preview

Answer 2

Sie sind ein paar Dinge in Ihrem Code fehlt.

1. Sie benötigen Bindungen zu verwenden, um Parameter zu Komponenten
passieren
2. Sie verwenden das Wort „Modell“ in Ihrer Vorlage Modell zu beziehen, aber das ist nicht der Standard ein, das zu tun. Hier können Sie 2 Dinge tun, Sie können $ ctrl in Vorlagen verwenden oder controllerAs in der Komponente definieren.

Component Beispiel:

module.component('myTitle', { 
    template: '<h1>{{model.title}}</h1>', 
    controllerAs: 'model', 
    bindings: { 
    title: '<' 
    } 
}); 

Anwendungsbeispiel:

<my-title title="'I am First'"></my-title> 

Beachten Sie die Anführungszeichen innerhalb der doppelten Anführungszeichen in " 'Ich bin First'". Sie benötigen beide, weil Sie eine Zeichenfolge als Parameter übergeben.

Um den Titel in der Kopfzeile zu ändern, habe ich einen Dienst erstellt, um die Kommunikation von Komponenten unter ng-outlet und äußeren Komponenten zu ermöglichen, da Sie keine Daten als Bindungen über Routen übergeben können.

Ihre Plunker mit den Änderungen: https://plnkr.co/edit/ScpJYQItsMQlyd1Eacyi?p=preview