прямая привязка к свойству собственности в Angular - PullRequest
Новая
       50

прямая привязка к свойству собственности в Angular

1 голос
/ 02 февраля 2020

У меня есть такая модель: 

export class Person{
name: string;
}

, которая используется в моем компоненте следующим образом: 

export class TestComponent {
  @Input() person : Person;
  constructor() {
  }
}

Я хочу установить имя человека из html, как показано ниже: 

<app-test [person.name]="'Jack'"</app-test>

Когда я это делаю, angular начинает злиться на то, что: "Невозможно привязаться к 'person.name', поскольку оно не является известным свойством 'app-test'. "

хорошо, он как-то прав, person является собственностью моего компонента, а не person.name

С другой стороны, мы не получаем никакой ошибки в следующем примере: 

<span [style.color]="'red'">This span is red.</span>

Я иду против правил ??

Или свойство стиля внутренне отличается? Как?

Спасибо

Ответы [ 4 ]

1 голос
/ 02 февраля 2020

Вы правы [ngStyle] отличается, а [style] отличается, Вам нужно 

<app-test [person]="{name:'Jack'}"</app-test>

Другие варианты 

<app-test [person]="person"</app-test>

И в вашем main.app 

this.person.name='Jack'

Помните, что если вы используете объект на входе, любое изменение свойства объекта в родительском или дочернем элементе изменяет «свойства» объекта

1 голос
/ 02 февраля 2020

Это потому, что свойство Input, которое вы пытаетесь передать компоненту Test, - это «person.name», которое не определено в вашем компоненте Test. Ваш тестовый компонент ожидает что-то с именем "персона". Во-вторых, вы передаете строку, а не тип Person, который вы определили в тестовом компоненте. Измените компонент Test, чтобы он принимал строку или передавал Person и ссылался на свойство name в компоненте Test. И убедитесь, что имена совпадают .

Вот два способа подумать о передаче имени человека другому компоненту

<app-test [name]="person.name" [person]="person"></app-test>

Затем в тестовом компоненте: 

 export class TestComponent  {
  @Input() name: string;
  @Input() person : Person;
}

Обратите внимание на совпадение имен и типов? Мой совет будет не проходить больше, чем вам нужно. Если вам просто нужно передать имя Person, просто попросите ваш компонент принять строку. Нет необходимости передавать весь объект.

Шаблон TestComponent: 

<h1>Person: {{person.name}}</h1>
<h1>Name: {{name}}</h1>

Я собираюсь добавить ссылку на документацию Angular, так как считаю ее довольно важной частью Angular вы можете захотеть рассмотреть. Урок героев у них действительно хорош.

https://angular.io/api/core/Input

1 голос
/ 02 февраля 2020

Невозможно привязать к person.name, потому что декоратор Input () привязан к персонажу в дочернем компоненте (тесте), а не к любому указанному c свойству, как person.name

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

См. пример .

0 голосов
/ 02 февраля 2020

Это потому, что style является директивой с несколькими селекторами и входами.

Этого можно добиться, имея некоторую директиву, которая бы выполняла эту работу. Я думаю, вы могли бы сделать что-то похожее на это: (не проверено) 

import { Directive, ViewContainerRef, ChangeDetectorRef, OnInit } from '@angular/core';

const selector = `
  [name],
  [name.foo],
  [name.bar]
`;

export const inputs = [
  'name',
  'name.foo',
  'name.bar'
];



@Directive({
  selector,
  inputs
})
export class HelloDirective implements OnInit {
  constructor(
    private viewContainerRef: ViewContainerRef
  ) {
  }

  ngOnInit(): void {
    const getSetKeys = Object.keys(this).filter(item => inputs.indexOf(item) > -1);
    const getValues = getSetKeys.map(item => this[item]);
    const component = this.viewContainerRef['_view'].component;
    getSetKeys.forEach((item, index) => {
      const splitKey = item.split('.');
      component[splitKey[0]][splitKey[1]] = getValues[index];
    })
  }
}

В этом случае вы могли бы использовать вашу директиву как <some-component [name.foo]="'Some foo'" [name.bar]="'Some bar'"></some-component>, и это вставило бы ваш объект "name" в компонент.

Я бы не рекомендовал этот способ, но его можно реализовать.

...