Угловые элементы: декоратор @Input не работает с переменными

Question

У меня есть несколько отдельных веб-компонентов, выполненных с угловыми элементами, которые я импортирую в основной, который имеет маршрутизатор и является базовым приложением.Маршруты довольно просты:

import { Component } from '@angular/core';
import { Router } from "@angular/router";

@Component({
    selector: 'example',
    template: '<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>',
    styles: []
})
export class ExampleComponent {
    public toPass: string = "Hello World!";

    constructor(private router: Router) {}

    onCallback(event) {
        console.log(event);
        this.router.navigate(['example-two']);
    }
}

И компоненты делают то, что они должны делать.

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: "component-one",
    templateUrl: "./component-one.html",
    styleUrls: ["./component-one.scss"],
    encapsulation: ViewEncapsulation.Emulated,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ComponentOne implements OnInit {
    @Input() variable: string;
    @Output() callback = new EventEmitter<any>();

    constructor() {}

    ngOnInit() {
        console.log("Variable: ", this.variable);
    }

    someRandomButtonClicked() {
        callback.emit({ data: "Callback Called" });
    }
}

Теперь, когда я запускаю основное приложение, все показывает, как ожидалось, обратный вызовработает нормально, но переменная не определена.Я что-то упустил в объявлении @Input в моих веб-компонентах?

Answer 1

Поскольку вы используете угловые элементы, убедитесь, что имя вашей переменной указано в smallcaps примерно так @Input() myvariable: string, а не @Input() myVariable: string отметьте здесь https://github.com/angular/angular/issues/24871

Answer 2

Вы можете просто инициировать переменную в ComponentOne.Тогда должно работать

@Input() variable:String = “”;

Answer 3

В вашем коде измените String на string во всех местах, показанных в вопросе.И посмотрите, работает ли он.

String является конструктором для типа string.Подробнее здесь

См. различие между строкой и строкой .

ОБНОВЛЕНИЕ:

У меня естьощущение, что это связано с форматом встроенного шаблона, который вы использовали.

Измените

@Component({
    selector: 'example',
    template: '<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>',
    styles: []
})

на это,

@Component({
    selector: 'example',
    template: `<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>`,
    styles: []
})

Видите, я изменил template: '' на это

template: ``

В противном случае,парсинг строки встроенного шаблона может быть испорчен.

Проверьте, работает ли это.

Answer 4

Я думаю, вы просто не понимаете новый синтаксис :)

Когда вы используете [] вокруг имени входа, вы говорите angular, что вы даете ему переменную.Если вы не используете его, вы просите angular принять его как примитив.

Итак:

<component-one [variable]="myVar"   

В компоненте

* должен быть указан переменный с именем "myVar"1009 * Без

<component-one variable="myVar" 

Angular примет «myVar» в качестве значения строки

Бесполезно, но работает:

<component-one [variable]="'myVar'"

Вы задаете новую строку в качестве переменной