Angular2: связь родительского и дочернего компонентов, @Host и forwardRef
Я экспериментирую с недавно выпущенной бета-версией Angular2 и надеюсь, что кто-нибудь сможет мне кое-что прояснить.
У меня есть AppComponent, который служит основной структурой моего проекта. Его шаблон создает панель навигации, элементы которой считываются в публичную переменную (назовите ее "items") AppComponent после его ngOnInit. *ngfor затем отображает элементы. Это работает нормально.
В нижней части шаблона AppComponent находится элемент div, в котором находится маршрутизатор. В зависимости от того, какой элемент навигации пользователь выбирает, запускается маршрут и отображается другой подкомпонент. Это тоже отлично работает. В одном из этих подкомпонентов мне нужно сослаться на переменную "items" в родительском AppComponent. Я попробовал три способа передачи AppComponent к SubComponent в его конструкторе:
1. constructor(@Host() _host: AppComponent)
2. constructor(@Inject(forwardRef(() => AppComponent)) _host)
3. constructor(@Host() @Inject(forwardRef(() => AppComponent)) _host)
Метод 1 не выполняется во время выполнения с ошибкой типа "Не удается разрешить все параметры для подкомпонента", в то время как методы 2 и 3 работают, но я не понимаю, почему. Это может привести к мысли, что AppComponent не определен при вызове конструктора SubComponent, что невозможно, поскольку SubComponent не может существовать, если он не отображается в маршрутизаторе-выходе шаблона AppComponent. Но прямая ссылка работает.
Я могу опубликовать больше кода, но я думаю, что мне здесь не хватает чего-то концептуального.
Дополнительный вопрос - я вижу в предыдущих альфа-версиях, что декоратор @View часто использовался в определениях компонентов, например, для указания шаблона. Во всех примерах на сайте Angular я никогда не вижу @View, а только декоратор @Component. @View теперь устарел?
большое спасибо!!!
1 ответ
На ваш вопрос: @View теперь является необязательным (если его там нет, тогда вам нужно установить 'templateURL' или 'template' в вашем @Component) - Это изменение было сделано в выпуске 2.0.0-alpha.40 ( https://github.com/angular/angular/blob/master/CHANGELOG.md#200-alpha40-2015-10-09)