Angular 2: @HostBinding со свойством объекта ввода

Можно ли привязать значение @HostBinding, как в этом примере?

@Input() user: User;
@HostBinding("class.temp") user.role == "Admin"

Я знаю, что могу сделать это :

private _user: User;
@Input() set user(user: User) {
    this._user = user;
    this.temp = (this._user.role == "Admin");
}
@HostBinding("class.temp") temp: boolean;

но в этом случае, если мой пользователь изменит свою роль, значение никогда не будет обновлено в этом компоненте. Как это сделать?


angular angular2-hostbinding
person Mattew Eon    schedule 03.08.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вот как я делаю привязку хоста к свойству объекта:

@Input()
public user: User;

@HostBinding('class.example')
public get isExample(): boolean {
     return this.user && this.user.role === 'admin';
}

Если вы обнаружите, что застряли, и вам просто нужно, чтобы эта функция работала. Вы можете проверять изменения ролей при каждом обнаружении изменений, используя интерфейс DoCheck. Это говорит Angular вызывать ngDoCheck для каждого обнаружения изменений.

@Input()
public user: User;

@HostBinding('class.example')
public isExample: boolean;

public ngDoCheck(): void {
     this.isExample = this.user && this.user.role === 'admin';
}

Приведенное выше увеличивает нагрузку на приложение и не является лучшей практикой.

Вы должны разделить ввод на User и role следующим образом:

@Input()
public user: User;

@Input()
public role: string;

@HostBinding('class.example')
public get isExample(): boolean {
    return this.role === 'admin';
}

Это самое простое решение. Поскольку он использует собственное обнаружение изменений Angular.

Другое решение — сделать объект user неизменяемым. Таким образом, каждый раз при изменении свойства создается новый пользовательский объект. Это также вызовет обнаружение изменений в Angular и является предпочтительным способом работы с объектами в привязках.

С учетом сказанного, immutable имеет ограничения, и с ним может быть сложно работать.

Существуют и другие решения, такие как пользовательские наблюдаемые и использование ChangeDetectRef, чтобы сообщить компоненту, что что-то изменилось. Эти решения более сложные, и я думаю, что компоненты должны быть простыми.

Я стараюсь следовать примитивному правилу привязки. Где все входные данные компонента имеют числовой или строковый тип. Избегайте массивов и объектов.

В вашем примере вашему компоненту действительно нужен полный доступ к объекту пользователя или только к некоторым его свойствам? Если вы добавите входные данные для каждого необходимого вам свойства, вы отделите компонент от пользовательского объекта, и это также упростит тестирование.

person Reactgular    schedule 03.08.2017