Ввод веб-компонента (элементов) Angular не определен в ngOnInit

Я создаю веб-компонент в Angular. Моя цель - оценить, предоставил ли потребитель веб-компонента заданный ввод, в данном случае "accessToken". Однако ввод не определен в ngOnInit(), но печатается в ngOnChanges()

    _accessToken;
    @Input('accessToken')
    set accessToken(accessToken: string) {
        this._accessToken = accessToken;
        console.log(accessToken); // This prints the token, but after ngOnInit??
    }

    ngOnInit() {
      console.log(this._accessToken); // Why is this undefined?
    }

    ngOnChanges(changes) {
      console.log(changes); // This prints the token??
    }

Почему он недоступен в хуке жизненного цикла ngOnInit и как определить, ввел ли пользователь ввод наиболее эффективным способом?

Любые идеи приветствуются


person DauleDK    schedule 24.05.2020    source источник
comment
Я предполагаю, что он не определен в хуке ngOnInit, так как он передается позже. В хуке ngOnChanges вы регистрируете объект, который покажет вам значение в то время, когда вы расширяете его свойства в консоли инструментов разработчика.   -  person yurzui    schedule 24.05.2020
comment
как вы передаете ввод, если вы передаете какое-то значение напрямую (без асинхронной операции), то вы обязательно должны получить значение в ngOnit, поскольку ngOnchanges получает вызовы до ngOnit. Итак, если это похоже на этот ‹child-component [accessToken]='somes-direct-value'›‹/child-component›, вы получите значение в ngOnit(). Но если вы передаете какое-то значение, например ‹child-component [accessToken]=someAsyncOperationGettingValue'›‹/child-component›, оно будет недоступно в ngOnit, поскольку оно будет привязано к значению после завершения асинхронной операции. Вы также можете проверить последовательность console.   -  person Darpan    schedule 24.05.2020
comment
Я передаю значение напрямую - как в родительском угловом приложении, так и в «обычном» HTML-приложении.   -  person DauleDK    schedule 24.05.2020


Ответы (1)


Я не могу поверить, что это отвечает на вопрос, но, видимо, мне просто пришлось изменить свой ввод с accessToken ==> access_token.

Я узнаю, используя инструменты разработчика Chrome и проверяя компонент (!)

введите здесь описание изображения

Это также объясняется здесь:

Вы всегда должны использовать символы нижнего регистра.

Один из тех дней ???? - но теперь это работает. Также в ngOnInit()

person DauleDK    schedule 24.05.2020
comment
Привет, это работает и для меня, но с помощью этого синтаксиса я могу передавать только строковые литералы в качестве входных данных, а не сами переменные. Используя ваш синтаксис access-token='var', я бы получил строку var, а не переменную. Я пробовал access-token={{var}}, но это тоже не работает. Какие-либо предложения? - person B Snow; 20.01.2021
comment
Кроме того, если я изменю свою переменную @Input на одно слово, такое как «имя» вместо «токен доступа», и буду использовать его следующим образом: ‹element name={{var}}› я получаю правильное значение вместо строкового литерала но теперь у меня есть исходная проблема, когда в ngOnInit() она не определена, но в ngOnChanges() она имеет значение. Из того, что я могу понять, в зависимости от синтаксиса ngOnInit будет запускаться до ngOnChanges или наоборот :( - person B Snow; 20.01.2021