При обновлении с Angular 2 до Angular 7 невозможно связать [x], поскольку оно не является свойством [y] - PullRequest
Новая
       15

При обновлении с Angular 2 до Angular 7 невозможно связать [x], поскольку оно не является свойством [y]

0 голосов
/ 07 декабря 2018

Решение: Я забыл изменить HTML в том месте, где родитель показывал ребенка.Селектор всех компонентов изменился в преобразовании.Я забыл это проверить, так что спасибо всем, кто указал на HTML!

Я обновляю проект Angular 2 до Angular 7 и сталкиваюсь с ошибкой, которую не могу решить с помощью ответов от Google.

Я получаю ошибку: 

Can't bind to 'xClass' since it isn't a known property of 'yComponent'.
1. If 'yComponent' is an Angular component and it has 'xClass' input, then verify that it is part of this module.

Я нашел два ответа в Google.Во-первых, это происходит только в производственной сборке, но я пока не работаю в производственной сборке (насколько я знаю).Другой - добавить компонент к declarations в модуле приложения.Я добавил его и убедился, что он был в верхней части списка (когда я читал, что порядок объявлений также важен).

Я попытался добавить класс в объявления, но это такжевыдает ошибку компиляции.

Как «импортировать» класс в компоненте?

Вот (соответствующий) код из модуля приложения: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { yComponent } from './song-detail/song-detail.component';

@NgModule({
  declarations: [
    yComponent,
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

xClass: 

export class XClass {
    constructor
    (
        public name: string,
        public search_name: string,
        public source: string,
        public source_type: string,
        public source_name: string,
    )
    {}
}

yКомпонент: 

import { Component, Input } from '@angular/core';
import { XClass } from '../model/xClass';

@Component({
  selector: 'app-y-component',
  template: `
  <h2>{{ class.name }}</h2>
  `,
  styleUrls: ['./y-component.css']
})
export class yComponent {

  @Input() class:Class;

}

Редактировать: Я сделал здесь опечатку.У меня было @Input() xClass:XClass.

Ответы [ 3 ]

0 голосов
/ 07 декабря 2018

При объявлении свойства @Input в компоненте необходимо соблюдать осторожность.Убедитесь, что объект, предоставленный в качестве входных данных для селектора компонента в HTML, совпадает с ожидаемым в объявлении компонента.

Пример: 

<my-component [additionalDataInput]="myObjectFromParentComponent"></my-component>

и в компоненте: 

export class MyComponent {
@Input() additionalDataInput: TypeOfMyObjectFromParentComponent; // has to be same type
0 голосов
/ 07 декабря 2018 
@Input() class:Class;

должно быть 

@Input() xClass:XClass;

в качестве альтернативы, если вы не хотите изменять имя переменной, вы можете использовать 

@Input("xClass") class:Class;
0 голосов
/ 07 декабря 2018

Вы пытаетесь получить ввод xClass, в то же время объявляя ввод class.

Ввод следует использовать следующим образом @Input() propery: interface = initialValue

Где property - это имя, которое вы будетеиспользуйте позже как <my-awesome-component [propery]="2"></my-awesome-component>

Это означает, что оно должно быть таким же, как вы указали для компонента в [] или автономно при передаче только строки.

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

и initialValue вы можете использовать, если хотите иметь настраиваемое свойство со значением по умолчанию.

Если вам не нужны какие-либо начальные значения, вы можете свободно использовать @Input() propery: interface,или даже @Input() propery, если вас не интересуют типы

...