Thêm lớp học vào cơ thể trên Angular2

Tôi có ba thành phần. Đây là HomeComponent, SignInComponent và AppComponent. Trang chủ của tôi (HomeComponent) hiển thị khi ứng dụng được mở. Tôi đã nhấp vào nút "Đăng nhập" bằng trang đăng nhập. Tôi muốn lớp "đăng nhập" vào nội dung trong khi mở nó.Thêm lớp học vào cơ thể trên Angular2

Tôi có thể làm như thế nào?

// AppComponent 
import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent {} 

// SignInComponent 
import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'signin', 
    templateUrl: './signin.component.html', 
    styleUrls: ['./signin.component.css'] 
}) 
export class SignInComponent {} 

// HomeComponent 
import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'home', 
    templateUrl: './home.component.html' 
}) 
export class HomeComponent { } 

// Part of index.html 
<body> 
<app> 
    <div class="spinner"> 
     <div class="bounce1"></div> 
     <div class="bounce2"></div> 
     <div class="bounce3"></div> 
    </div> 
</app> 
</body>

Nguồn

2016-10-11 Mr.Ayanlar

Tôi đoán sẽ dễ dàng hơn nhiều nếu bạn cung cấp cho mỗi vùng chứa thành phần sẽ có lớp động. Sau đó, bạn có thể thêm nó thật dễ dàng ... –

Xem Bạn có thể thay đổi selector gốc của bạn để body và sau đó sử dụng HostBinding trang trí

@Component({ 
    selector: 'body', 
    template: `<child></child>` 
}) 
export class AppComponent { 
    @HostBinding('class') public cssClass = 'class1'; 
} 

@Component({ 
    selector: 'child', 
    template: `<button (click)="setClass()">Set class</button>` 
}) 
export class ChildComponent { 
    constructor(private rootComp: AppComponent) { } 
    setClass() { 
    this.rootComp.cssClass = 'class2'; 
    } 
}

Nguồn

2016-10-11 07:00:15 yurzui

cảm ơn bạn @yurzui –

Điều đó thật xảo quyệt! –

Angular2 không cung cấp bất kỳ cách nào được xây dựng để sửa đổi các phần tử DOM bên ngoài thành phần gốc (trừ <title>).

querySelector('body').classList.add('signin-page'); 
querySelector('body').classList.remove('signin-page');

hoặc

@Component(
    selector: 'body', 
    templateUrl: 'app_element.html' 
) 
class AppElement { 
    @HostBinding('class.fixed') 
    bool isFixed = true; 
}

cũng

Nguồn

2016-10-11 06:51:42

Điều này sẽ phá vỡ hiển thị phía máy chủ. – Spock

@ Günter Zöchbauer Tôi đang sử dụng '@ hostbinding' như bạn đang ở đây nhưng CSS của tôi kích hoạt cho một giây thứ hai bất kể boolean. – BenRacicot

@BenRacicot những gì "kích hoạt cho một giây phân chia" có nghĩa là chính xác. Không thể tưởng tượng rằng nó làm bất cứ điều gì nhưng thêm lớp. –

1. Nếu một phần của ứng dụng của bạn là trong góc, sau đó bạn có thể làm this-

cho cơ thể = document.getElementsByTagName ('body') [0] ;

body.classList.remove ("className"); // xóa lớp học

body.classList.add ("className"); // thêm lớp

2. Tôi sẽ thích câu trả lời được đưa ra bởi @Yurzui nếu toàn bộ giao diện người dùng ở góc cạnh.

Nguồn

2017-05-17 04:56:09

Đây là giải pháp sạch và nhanh nhất cho tôi. Cảm ơn. –

Thêm lớp học vào cơ thể trên Angular2

Trả lời

Các vấn đề liên quan