Как получить атрибут компонента?

Question

[liltrill]

У меня есть компонент:

@Component({
  selector: 'app-icon',
  templateUrl: './icon.component.html',
  styleUrls: ['./icon.component.less']
})

Как можно в конструкторе класса получить вот это значение:
<icon name="Нужное значение"></icon>

Answer 1

[Антон Швец]

в конструкторе это невозможно, на этом этапе view компонента еще не создан.
А так это обычный Input

Answer 2

[Александр]

Стоит попробовать @Attribute() декоратор

@Component({
  selector: 'app-icon',
  templateUrl: './icon.component.html',
  styleUrls: ['./icon.component.less']
})
export class IconComponent {
  constructor(@Attribute('name') public vasya: string) {
    console.log(vasya);
  }
}

Comments

[liltrill]

работает, вот только при передачи переменной нет((((

export class UiIconComponent implements OnInit {
  name: string;

  constructor(@Attribute('name')name: string) {
    this.name = name;
  }

  ngOnInit() {
  }
}

<ui-icon attr.name="{{Переменна не доходит то внутренностей компонента}}"></ui-icon>

[Александр]

С привязками не будет работать. В такой декоратор можно передать только строку.
<ui-icon name="просто текст"></ui-icon>

Проверил такой код.

@Component({
  selector: 'my-app',
  template: `<hello name="some info"></hello>`,
})
export class AppComponent  {}

@Component({
  selector: 'hello',
  template: `
    Cнято с хоста: "{{name}}"
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  name;
  constructor(@Attribute('name') testVar: string) {
   this.name = testVar;
  }
  ngOnInit() {
     console.log('Attributre =', this.name);
  }
}

Для остального надо стандартно использовать @Input

[liltrill]

Александр, а как правильно это сделать?

export class UiIconComponent implements OnInit {
  @Input() name: string;

  constructor() {
    this.name = name;
  }

  ngOnInit() {
  }
}

<ui-icon attr.name="{{item.icon.substring(5, item.icon.length)}}"></ui-icon>

Переменная не доходит, я похоже как то не так @input использую(

[Антон Швец]

liltrill, вам написали же

constructor(@Attribute('name') public name: string) { }

или
@Input() name: string

никаких лишних присваиваний делать не надо.

[liltrill]

Антон Швец, Ошибка была в attr.name, чтобы заработало нужно было написать

<ui-icon [name]="item.icon.substring(5, item.icon.length)"></ui-icon>