Tôi không biết cách thêm vào thành phần của mình <component></component>một thuộc tính lớp động nhưng bên trong mẫu html (component.html).
Giải pháp duy nhất tôi tìm thấy là sửa đổi mục thông qua phần tử gốc "ElementRef". Giải pháp đó có vẻ hơi phức tạp để làm một cái gì đó rất đơn giản.
Một vấn đề khác là CSS phải được xác định bên ngoài phạm vi thành phần, phá vỡ đóng gói thành phần.
Có một giải pháp đơn giản hơn? Một cái gì đó giống như <root [class]="..."> .... </ root>bên trong mẫu.
Câu trả lời:
@Component({
selector: 'body',
template: 'app-element',
// prefer decorators (see below)
// host: {'[class.someClass]':'someField'}
})
export class App implements OnInit {
constructor(private cdRef:ChangeDetectorRef) {}
someField: boolean = false;
// alternatively also the host parameter in the @Component()` decorator can be used
@HostBinding('class.someClass') someField: boolean = false;
ngOnInit() {
this.someField = true; // set class `someClass` on `<body>`
//this.cdRef.detectChanges();
}
}Bằng cách này, bạn không cần thêm CSS bên ngoài thành phần. CSS như
:host(.someClass) {
background-color: red;
}hoạt động từ bên trong thành phần và bộ chọn chỉ được áp dụng nếu lớp someClassđược đặt trên thành phần máy chủ.
:hostlàm việc. Tôi có thể tìm hiểu thêm về tham số máy chủ trong trình trang trí @Component () (cú pháp không rõ ràng đối với tôi và tài liệu @Component không giải thích nhiều ) hoặc tìm hiểu thêm về HostBinding ưa thích của bạn (nó chỉ được liệt kê dưới dạng Giao diện trên Trang web Angular2?)
@Input() @Output() @HostBinding() @HostListener() @ViewChild(ren)() @ContentChild(ren)()
@HostBinding('class.xxx') get xxxclass(){ return !this.someField;}
Câu trả lời của Günter rất hay (câu hỏi là yêu cầu thuộc tính lớp động ) nhưng tôi nghĩ tôi sẽ thêm chỉ để hoàn thiện ...
Nếu bạn đang tìm kiếm một cách nhanh chóng và rõ ràng để thêm một hoặc nhiều lớp tĩnh vào thành phần máy chủ của thành phần của bạn (nghĩa là cho mục đích tạo kiểu chủ đề), bạn có thể thực hiện:
@Component({
selector: 'my-component',
template: 'app-element',
host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}Và nếu bạn sử dụng một lớp trên thẻ mục nhập, Angular sẽ hợp nhất các lớp, nghĩa là,
<my-component class="someClass2">
I have both someClass1 & someClass2 applied to me
</my-component>ngcontent_hosthơn bất kỳ các thuộc tính trên các yếu tố trong tôi Mẫu , let's call those ngcontent_template , so if I put a style in the styleUrls` của thành phần của tôi, họ sẽ không ảnh hưởng đến các yếu tố chủ vì họ sẽ không ảnh hưởng ngcontent_host, họ Chỉ có thể ảnh hưởng đến các yếu tố mẫu; họ chỉ có thể ảnh hưởng ngcontent_template. Tôi có nhầm không? Bất kỳ đề nghị về điều này? Tôi đoán là tôi luôn có thể quay đầuViewEncapsulation.None
@HostBinding('class.someClass') true;. Bạn thậm chí có thể làm điều này từ bất kỳ lớp nào thành phần của bạn mở rộng.
{}biến thể, bạn có thể muốn thiết lập use-host-property-decoratorthiết lập để falseở tslint.json. Nếu không, bạn sẽ nhận được cảnh báo IDE. @adamdport Phương pháp đó không hoạt động (nữa). Sử dụng Angular 5.2.2 trong ứng dụng của chúng tôi.
Bạn chỉ có thể thêm @HostBinding('class') class = 'someClass';vào bên trong lớp @Component của mình .
Thí dụ:
@Component({
selector: 'body',
template: 'app-element'
})
export class App implements OnInit {
@HostBinding('class') class = 'someClass';
constructor() {}
ngOnInit() {}
}classnhư một tên biến (kể từ khi bạn có thể tham khảo nó và thay đổi nó sau này). Ví dụ : @HostBinding('className') myTheme = 'theme-dark';.
Nếu bạn muốn thêm một lớp động vào thành phần máy chủ của mình, bạn có thể kết hợp của bạn HostBindingvới một getter như
@HostBinding('class') get class() {
return aComponentVariable
}
Bản demo của Stackblitz tại https://stackblitz.com/edit/angular-dynamic-hostbinding
Đây là cách tôi đã làm (Angular 7):
Trong thành phần, thêm một đầu vào:
@Input() componentClass: string = '';
Sau đó, trong mẫu HTML của thành phần thêm một cái gì đó như:
<div [ngClass]="componentClass">...</div>
Và cuối cùng trong mẫu HTML nơi bạn thể hiện thành phần:
<root componentClass="someclass someotherclass">...</root>
Tuyên bố miễn trừ trách nhiệm: Tôi khá mới đối với Angular, vì vậy tôi có thể gặp may mắn ở đây!
<root>thẻ, không phải bất cứ thứ gì bạn thêm vào mẫu của thành phần.
someField = truetrongngOnInit()-method thay vìngAfterViewInit(). Tôi không thể làm cho nó hoạt động khác được.