Angular - Использование заголовка в качестве @Input

Question

Использование атрибутов html title в качестве @Input() приводит к странным результатам.

пример выполнения: https://stackblitz.com/edit/angular-apd2mf

Hello .component.ts

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

app.component.ts

@Component({
  selector: 'my-app',
  template: `
    <hello name="{{ name }}" title="Mr. "></hello>
    <p>Start editing to see some magic happen :)</p>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
}

результат

Проблема здесь заключается в том, что я вижу значение title, введенное при наведении курсора в любом месте заголовка. Я знаю, что могу избежать этого, используя его как

<hello name="{{ name }}" [title]="'Mr. '"></hello>

Но есть ли причина, по которой angular присоединяет атрибут, даже если я объявляю его как вход?

Answer 1

title - это стандартный атрибут html для отображения hint или tooltip, когда вы связываете title не только вы связываете @Input, но и вы подключены к html атрибуту заголовка.

Способ исправить это с помощью другого имени свойства, отличного от title, например, text или [yourcomponent]Title, например listTitle, ...

Answer 2

Чтобы предотвратить отображение всплывающей подсказки, вы можете определить свое собственное свойство title как метод получения / установки и присвоить пустую строку собственному свойству title HTML в установщике:

private _title: string;

@Input() get title(): string {
  return this._title;
}
set title(value: string) {
  this._title = value;
  this.elementRef.nativeElement.title = "";
}

constructor(private elementRef: ElementRef) { }

См. этот стек-блиц для демонстрации.

Answer 3

в angular есть много синтаксиса для взаимодействия с компонентом. Как сказал @ AliF50,

title вызовет атрибут заголовка html, где [title] будет привязан к angular свойству ввода, как вы можете видеть здесь .