尝试：-

Question

我想在单击按钮时向我的组件添加一个类。因此，我使用Renderer2进行了以下操作：

this.renderer.addClass(this.elRef.nativeElement, 'photo-removing');

仅当我在全局css文件中添加css类时，该类才适用。当我将其添加到组件css文件时，它不起作用。知道为什么会这样吗？

更新：这是我的组件html：

<div *ngIf="imgMainUrl">
    <img
        [src]="imgMainUrl"
        [style.width.px]="width" [style.height.px]="height"
        [ngClass]="{ 'img-radius' : rounded }"
    >
    <i
        [pTooltip]="tooltipTxt" [tooltipPosition]="tooltipPosition"
        class="icon-close close-btn"
        (click)="removePhoto()">
    </i>
</div>

和CSS：

.photo-removing {
    opacity: 0.4;
    border:1px solid red;
}

Answer 1

您可以将[ngClass]与*ngIf一起使用

在.html中：

<button (click)="buttonClicked()"></button>

<div [ngClass]={checker === true ? 'photo-removing' : ''}></div>

在.ts文件中：

export class Home{

  checker:boolean = false;
  constructor(){}


  buttonClicked() {
   this.checker = !this.checker;
  }
}

Answer 2

这是何时使用[ngClass]指令的完美示例。

如果只是使用按钮来切换某些变量，则可以执行此操作...

在您的component.ts文件中：

# Elmo Embedding
url = "https://tfhub.dev/google/elmo/2"
embed = hub.Module(url, trainable=True)
elmo_batch_size = 64
def ELMoEmbedding(x):
    return embed(tf.squeeze(tf.cast(x, tf.string)), signature="default", as_dict=True)["elmo"] 

# Input Layer
input_text = Input(batch_shape=(7780, 1), dtype="string")

# Embed Layer
embedding = Lambda(ELMoEmbedding, output_shape=(1024, None))(input_text)

# Middle Layers
l_cov1= Conv1D(128, 5, activation='relu', input_shape = (1024,None))(embedding)
l_pool1 = MaxPooling1D(5)(l_cov1)
l_cov2 = Conv1D(128, 5, activation='relu')(l_pool1)
l_pool2 = MaxPooling1D(5)(l_cov2)
l_cov3 = Conv1D(128, 5, activation='relu')(l_pool2)
l_pool3 = MaxPooling1D(35)(l_cov3)  # global max pooling
l_flat = Flatten()(l_pool3)
l_dense = Dense(128, activation='relu')(l_flat)
preds = Dense(2, activation='sigmoid')

model.compile(loss="binary_crossentropy", optimizer="adam", metrics=['accuracy'])

# Train
with tf.Session() as session:
    # Run model thorugh to train
    K.set_session(session)
    session.run(tf.global_variables_initializer())  
    session.run(tf.tables_initializer())
    history = model.fit(x_train, y_train, epochs=5, batch_size=32, shuffle=True, validation_data=(x_test, y_test))
    model.save_weights('elmo-model.h5')
    model_json = model.to_json()

# Test
with tf.Session() as session:
    K.set_session(session)
    session.run(tf.global_variables_initializer())
    session.run(tf.tables_initializer())
    model.load_weights('elmo-model.h5') 
    predicts = model.predict(x_test, batch_size=batch_size)
    y_pred=np.argmax(predicts, axis=1)
y_test=np.argmax(y_test, axis=1)

在您的component.html文件中：

public clicked: boolean = false;

click() {
     this.clicked ? false : true;
}

如果您确实要使用渲染器，则需要在角度应用程序中设置以下代码：

<button (click)="click()">Set to {{!clicked}}</button>

<div [ngClass]="{'your-class' : clicked}"></div>

通过将此值设置为None，可以告诉Angular不要封装视图。这样，默认的作用域规则，隔离和样式保护将不适用。因此，Angular将CSS添加到全局样式中。这基本上与将组件的样式粘贴到HTML中相同。

https://angular.io/api/core/ViewEncapsulation

Answer 3

尝试：-

Stackblitz链接：-https://stackblitz.com/edit/renderer2-example-2-wdz4og?file=src/app/app.component.css

.html

<div #test *ngIf="imgMainUrl">
  test
    <img
        [src]="imgMainUrl"
        [style.width.px]="width" [style.height.px]="height"
        [ngClass]="{ 'img-radius' : rounded }"
    >
<button type="button" (click)="addClass()">asasas</button>

</div>

.ts

  @ViewChild('test') test: ElementRef;
  imgMainUrl = true;
  constructor(private renderer: Renderer2) { }
  addClass() {
    this.renderer.addClass(this.test.nativeElement, 'photo-removing');
  }

从组件css文件向组件添加角类

3 个答案:

尝试：-

.html

.ts