継承されたマークアップを使用した角の部分

Question

角のコンポーネントを作成し、コンポーネントの内部HTMLを継承しようとしていますが、内部HTMLのマークアップがコンパイルされていないようです。これの私の使用例は、コンポーネントに複数の方法で使用したい属性バインディングがあるため、テンプレートがまったく同じになることはありません。

例えば、私は次のような単純なコントローラを持っていると言う：

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

let MyComponent = { 
    controller: ComponentCtrl 
}; 

app.component('myComponent', MyComponent); 

私は、次のHTMLをしたい：

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

としてレンダリングするために：今、しかし

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

と表示されます。

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

評価が評価されていません。

私が間違っていることはありますか？

Answer 1

{{ }}の中にコントローラの正しい名前をhtmlで記述しましたか？ controller: ComponentCtrlと書いて{{ $ctrl.variable }}と書いた。同じ名前を持つ必要があるように見える

Answer 2

デフォルトでは、トランジションは行われません。コンポーネントには、トランスコードする必要があることを明確にする必要があります。また、あなたはトランスクリプトの対象となるテンプレートを明確にしていませんでした。したがって、コンポーネントは次のようになります。

ただし、コンポーネントのスコープは常に分離されています。したがって、ouはコンポーネント外から{{ $ctrl.variable }}にアクセスすることはできません。

Answer 3

私は問題が{{ $ctrl.variable }}から来ると思います。実際に$ ctrlは、コンポーネントのコントローラではなく、親コントローラとリンクしようとします。

コンポーネントのコントローラとやり取りする場合は、いくつかのパラメータを使用する必要があります。