Угловой компонент с перераспределенной разметкой

Я пытаюсь создать угловой компонент и перекрыть внутренний 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>

без оценки разметки.

Есть ли что-то, что я делаю неправильно?

источник

2016-11-11 snusnu

это угловой 1 ou 2? – qchap

Это угловой 1 (версия 1.5). – snusnu

То, что вы пытаетесь сделать, в настоящее время невозможно с помощью угловых указателей или компонентов (возможно, никогда не будет возможным). К сожалению, перемещенные элементы не становятся частью детской области элемента, в который они переходят. в этом случае '$ ctrl' по-прежнему относится к контроллеру выше' my-component', а не 'ComponentCtrl'. – Claies

Вы написали правильное имя контроллера внутри своего {{ }} в html? вы написали controller: ComponentCtrl, а затем {{ $ctrl.variable }}. похоже, что они должны иметь одинаковые имена

источник

2016-11-11 17:11:15

Я думал, что имя контроллера по умолчанию имеет значение $ ctrl, если я не определил другое имя с свойством controllerAs. – snusnu

Да, проблема должна быть где-то в другом месте –

Заключение не производится по умолчанию, вы должны указать на своем компоненте, что его необходимо перевести. Кроме того, вы не указали в своем шаблоне, где он должен быть запущен. Поэтому ваш компонент должен выглядеть так:

let MyComponent = { 
    transclude: true, // tell angular to transclude it 
    template: '<ng-transclude></ng-transclude>', // tell where it will be transcluded 
    controller: ComponentCtrl 
}; 

app.component('myComponent', MyComponent);

Однако, как было сказано в комментариях, области компонентов всегда изолированы. Поэтому ou не сможет получить доступ к {{ $ctrl.variable }} вне компонента.

источник

2016-11-11 17:13:42

Я пробовал настройку transclude по вашему выбору, но моя внутренняя разметка HTML по-прежнему не оценивается. Я сделал jsFiddle здесь, чтобы продемонстрировать: [jsFiddle] (https://jsfiddle.net/adrosenthal/ng43f688/2/) – snusnu

Это потому, что области компонентов всегда изолированы. Таким образом, вы не можете получить доступ к нему извне своего компонента, если только не привязаны. Проверьте это https://jsfiddle.net/ng43f688/3/ –

Я думаю, проблема возникла из {{ $ctrl.variable }}. Фактически $ ctrl пытается связать с родительским контроллером не с контроллером вашего компонента.

Если вы хотите взаимодействовать с контроллером вашего компонента, вам нужно использовать какой-либо параметр.

источник

2016-11-11 17:27:41 qchap

Угловой компонент с перераспределенной разметкой

ответ

Смежные вопросы