Каковы правила нормализации для свойств в Angular 2+? - PullRequest
Новая
       39

Каковы правила нормализации для свойств в Angular 2+?

0 голосов
/ 13 февраля 2019

Недавно я столкнулся с глупой проблемой с компонентом, который использует свойство title для привязки заголовка этого компонента.Я забыл, что title был известным атрибутом HTML, и мои пользователи начали видеть всплывающие подсказки с заголовком над их компонентами.

Сначала я просто изменил имя свойства, чтобы оно не конфликтовало.Но потом я вспомнил, что в AngularJS есть правила нормализации для директив .

Я искал (используя функцию поиска) документацию Angular 6+ и не смог найти слово нормализация там.Я также проверил, и кажется, что есть некоторая нормализация, по крайней мере, с использованием data-.

Мой вопрос: Официально ли поддерживается нормализация в Angular 6+?и где я могу найти документацию для этого?

Я создал StackBlitz со следующими ключевыми компонентами, чтобы подчеркнуть, что использование data-name="bob", по-видимому, эквивалентно name="bob": 

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{title}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() title: string;
}

<hello data-title="bob"></hello>
<hello title="bob"></hello>

1 Ответ

0 голосов
/ 13 февраля 2019

Если вы используете директиву, у которой есть входные данные, которые могут конфликтовать с атрибутом родительского элемента, у вас есть 3 параметра.

  1. Измените входную информацию директивы на неконфликтующее имя.

  2. Использовать нотацию привязки 

    <button title="PushMe" titleTesting [title]="'dont push me'">Push this</button>

  3. Использовать нотацию атрибута. 

    <button [attr.title]="'PushMe'" titleTesting title="dont push me">Push this</button>

Код директивы, используемый вшаблон выше: 

@Directive({
  selector: '[titleTesting]'
})
export class TitleTestDirective implements OnInit {
  @Input() title: string;
  ngOnInit(){
    console.log(this.title);
  }
}

Наконец, если значения должны быть одинаковыми и являются константой, определенной в шаблоне, тогда действуйте как обычно, так как элемент и ваша директива получат одно и то же значение, например: 

<button titleTesting title="dont push me">Push this</button>

См. Также Синтаксис привязки: обзор и Привязка свойства или интерполяция? , привязка атрибута и stackblitz .

Нормализация

Короче angular не поддерживает или не делает ничего с нормализацией.Вы указали директиву, но у вас был пример компонента, у компонента не было бы никаких конфликтующих атрибутов / входов, поэтому я решил смоделировать пример с использованием директив.

data- - это конструкция HTML5, angular напрямую с этим ничего не делает.Если вы включите data- , хотя он все равно будет привязан к входным данным, как ожидается, но он не будет установлен для какого-либо конкретного атрибута html.Пример: data-title="some title".Исходя из данных- документации , это ожидаемое поведение.

Можно указывать как data- , так и элементы не data- одного и того же типа для разных значений, но важен порядок их появления.Пример: 

<button titleTesting title="Push me" data-title="DOn't push me">Push this</button>
...