Eckige Komponente mit durchscheinendem Markup

Ich versuche, eine Angular-Komponente zu erstellen und den inneren HTML-Code der Komponente zu transponieren, aber das Markup des inneren HTML scheint nicht zu kompilieren. Mein Anwendungsfall dafür ist, dass die Komponente eine Attributbindung hat, die ich auf verschiedene Arten verwenden möchte, so dass die Vorlage niemals genau gleich ist.Eckige Komponente mit durchscheinendem Markup

Zum Beispiel sagen, dass ich die folgenden einfachen Controller habe:

class ComponentCtrl { 
    $onInit() { 
     this.variable = 'hello world'; 
    } 
} 

let MyComponent = { 
    controller: ComponentCtrl 
}; 

app.component('myComponent', MyComponent);

ich folgende HTML will:

<my-component> 
    <div style="color: green;">{{ $ctrl.variable }}</div> 
</my-component> 
<my-component> 
    <div style="color: red;">{{ $ctrl.variable }}</div> 
</my-component>

zu machen:

<div style="color: green;">hello world</div> 
<div style="color: red;">hello world</div>

jedoch jetzt es wird nur gerendert als:

<div style="color: green;"></div> 
<div style="color: red;"></div>

ohne das Markup wird ausgewertet.

Gibt es etwas, was ich falsch mache?

Quelle

2016-11-11 snusnu

es ist winklig 1 oder 2? – qchap

Dies ist Angular 1 (Version 1.5). – snusnu

Das, was Sie zu tun versuchen, ist derzeit mit eckigen Anweisungen oder Komponenten nicht möglich (möglicherweise wird es nie möglich sein). Leider werden die übersetzten Elemente nicht Teil des untergeordneten Bereichs des Elements, in das sie eingeschlossen werden. In diesem Fall bezieht sich "$ ctrl" immer noch auf den Controller über 'my-component', nicht' ComponentCtrl'. – Claies

haben Sie den richtigen Namen des Controllers in Ihrem {{ }} in HTML geschrieben? Sie schrieb controller: ComponentCtrl und dann {{ $ctrl.variable }}. Es sieht so aus, als ob sie die gleichen Namen haben müssen

Quelle

2016-11-11 17:11:15

Ich dachte, der Controller-Name ist standardmäßig $ ctrl, es sei denn, ich habe einen anderen Namen mit der Eigenschaft controllerAs definiert. – snusnu

ja, das Problem sollte woanders sein –

Transclosure wird nicht standardmäßig gemacht, Sie müssen auf Ihrer Komponente angeben, dass sie in die Datenbank eingefügt werden muss. Außerdem haben Sie nicht angegeben, auf welche Vorlage Sie verzichten sollen. Daher sollte Ihre Komponente wie folgt aussehen:

Wie jedoch auf Kommentaren erzählt wurde, sind Komponentenbereiche immer isoliert. Daher können Sie von außerhalb der Komponente nicht auf {{ $ctrl.variable }} zugreifen.

Quelle

2016-11-11 17:13:42

Ich habe versucht, transclude wie Sie vorgeschlagen, aber meine innere HTML-Markup wird noch nicht ausgewertet. Ich habe hier ein jsFiddle gemacht, um zu demonstrieren: [jsFiddle] (https://jsfiddle.net/adrosenthal/ng43f688/2/) – snusnu

Das liegt daran, dass Komponentenbereiche immer isoliert sind. Sie können also nicht von außerhalb Ihrer Komponente darauf zugreifen, außer von Bindungen. Überprüfen Sie dies https://jsfiddle.net/ng43f688/3/ –

Ich denke, das Problem kommt von {{ $ctrl.variable }}. Tatsächlich versucht $ ctrl, sich mit einem übergeordneten Controller zu verbinden, nicht mit dem Controller Ihrer Komponente.

Wenn Sie mit dem Controller Ihrer Komponente interagieren möchten, müssen Sie einen Parameter verwenden.

Quelle

2016-11-11 17:27:41 qchap

Eckige Komponente mit durchscheinendem Markup

Antwort

Verwandte Themen