powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / angular 2. html тэк компонента, как убрать ?
5 сообщений из 5, страница 1 из 1
angular 2. html тэк компонента, как убрать ?
    #39448476
TsHeloWorlder
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Есть такой простой компонентик

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<div (click)="onItemClick()"
     [ngClass]="{ 'work__day': 'true'}">
    {{myDate.getDate()}}
</div>

export class MyItemComponent{
    @Input() myDate: Date;    
    @Output() onClick: EventEmitter<Date> = new EventEmitter();

    ngOnInit(): void {        
    }

    private onItemClick ()
    {        
        this.onClick.emit(this.myDate);
    }
}



Используется так
Код: html
1.
2.
3.
<div class="mycalendar" >
   <my-item *ngFor="let date of dates" [myDate]="date" (onClick)="onDateClick($event)"></my-item>
</div>



Проблема в том, что в итоге получаю такую разметку:
Код: html
1.
2.
3.
4.
5.
<my-item ng-reflect-item="[object Object]" >
	<div ng-reflect-ng-class="[object Object]" class="work__day">
    6
	</div>
</my-item>

Создается два уровня вложенности my-item -> div, и класс стиля назначается внутреннему диву, а не внешнему элементу. Верстка ломается.

Первый вопрос. Как я могу вывести класс стиля в элемент my-item, или избавится от излишней вложенности ? Теоретически я могу перенести вывод класса стиля на уровень выше:
Код: html
1.
2.
3.
<div class="mycalendar" >
   <my-item *ngFor="let date of dates" [myDate]="date" (onClick)="onDateClick($event)" [ngClass]="{ 'work__day': 'true'}"></my-item>
</div>



Но my-item должен заниматся выводом своих стилей сам. Иначе нужно будет помнить об этом в вышележащем компоненте, делать это там. Так не правильно.


Второй вопрос. Что за ng-reflect-ng-class="[object Object]" ? [object Object] это же простая строка. Это баг и там должно выводится что-то более разумное, или для чего это вообще ?
...
Рейтинг: 0 / 0
angular 2. html тэк компонента, как убрать ?
    #39448711
TsHeloWorlder
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Нашел решение http://stackoverflow.com/a/35996292

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
@Directive({
  (...)
  host: {
    '[class.className]' : 'className', 
    '[class]' : 'classNames' 
  }
}
export class MyDirective {
  constructor() {
    this.className = true;
    this.classNames = 'class1 class2 class3';
  }
}



Используя "host" можно получить доступ к родительскому элементу и менять, в частности, его стили. Решение работающее, но кажется это не рекомендуемый подход в Ангуляре - формировать вручную строку класса и пробрасывать ее во вьюху. Но какая альтернатива ?
...
Рейтинг: 0 / 0
angular 2. html тэк компонента, как убрать ?
    #39464951
TsHeloWorlder
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
снова задам этот вопрос, т.к. пока не разобрался:

Второй вопрос. Что за ng-reflect-ng-class="[object Object]" ? [object Object] это же простая строка. Это баг и там должно выводится что-то более разумное, или для чего это вообще ?

Это я вместо класса CSS вижу. Что странно, класс стиля то нормально применяется. Отлаживать сильно мешает.
...
Рейтинг: 0 / 0
angular 2. html тэк компонента, как убрать ?
    #39465652
Фотография FishHook
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
TsHeloWorlderЕсть такой простой компонентик

use ng-template or ng-container
...
Рейтинг: 0 / 0
angular 2. html тэк компонента, как убрать ?
    #39468246
Фотография Тshаmil
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
TsHeloWorlderснова задам этот вопрос, т.к. пока не разобрался:

Второй вопрос. Что за ng-reflect-ng-class="[object Object]" ? [object Object] это же простая строка. Это баг и там должно выводится что-то более разумное, или для чего это вообще ?

Это я вместо класса CSS вижу. Что странно, класс стиля то нормально применяется. Отлаживать сильно мешает.
это баг, так бывает когда случайно преобразовать объект в строку, можно воспроизвести вот так:
Код: javascript
1.
var bug = {}.toString();


в переменной bug будет строка [object Object]...
нужно проверить на каком этапе в директиву ng-reflect-ng-class попадает значение, и дальше по цепочке искать момент преобразования объекта в строку.
так бывает когда используем например такой объект:
Код: javascript
1.
2.
3.
4.
5.
6.
var item = {
   name: {
      firstName: "Ivan",
      lastName: "Ivanov"
   }
}


думая что в атрибуте name хранится строка "Ivan Ivanov", добавляем его в директиву таким образом:
ng-reflect-ng-class={item.name}
и получим
ng-reflect-ng-class="[object Object]"
...
Рейтинг: 0 / 0
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / angular 2. html тэк компонента, как убрать ?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]