时间戳

首页 > 解决方案 > 通过组件方法将类插入具有属性绑定的正文元素时出现问题

angular - 通过组件方法将类插入具有属性绑定的正文元素时出现问题

问题描述

我刚开始学习 Angular，这是我在 Stackoverflow 上的第一篇文章，如果我的问题看起来太明显，我很抱歉，但我自己真的找不到答案......

该项目由两个组件组成，一个在另一个内部。在<table>“外部”有一个，我需要在它的<tr>标签上添加一个 (click) 事件来触发属性绑定到页面的 body 元素，特别是插入一个保存到 .scss 全局文件中的类，使用属性“溢出：隐藏”。我已经导出了外部的组件并将其导入到 app.module 中，尽管它似乎没有什么不同。

Chrome 读取 html 代码，就好像那里没有任何括号一样......

Chrome 的 F12 ->

<body [class.body-overflow-hidden]=" displayBody == bodyoverflowhidden'" class="theme-origin">

索引.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Time de Vendas</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./assets/img/favicon.png">
</head>

<body [class.body-overflow-hidden]=" displayBody == 'bodyoverflowhidden'" class="theme-origin">

  <app-root></app-root>
</body>
</html>

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ExtratopilotoModule } from './extratopiloto/extratopiloto.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './error/not-found/not-found.component';
import { FeedComponent } from './feed/feed.component';
import { ProfileComponent } from './profile/profile.component';
import { TopsComponent } from './tops/tops.component';
import { StatementComponent } from './profile/statement/statement.component';
import { ExtratopilotoComponent } from './extratopiloto/extratopiloto.component';

@NgModule({

  declarations: [
    AppComponent,
    HomeComponent,
    NotFoundComponent,
    FeedComponent,
    ProfileComponent,
    TopsComponent,
    StatementComponent,
  ],

  imports: [
    BrowserModule,
    AppRoutingModule,
    ExtratopilotoModule
  ],

  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

外部组件

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-extratopiloto',
  templateUrl: './extratopiloto.component.html',
  styleUrls: ['./extratopiloto.component.scss']
})

export class ExtratopilotoComponent implements OnInit {
  display: string = '';
  displayBody: string = '';
  displayProposal() {
    this.display = "modal-on";
    this.displayBody = "bodyoverflowhidden";
  }

  hideProposal() {
    this.display = "";
    this.displayBody = "";
  }
  constructor() { }
  ngOnInit() {
  }
}

外部模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ExtratopilotoComponent } from './extratopiloto.component';

@NgModule({

  imports: [
    CommonModule
  ],
  declarations: [
    ExtratopilotoComponent
  ],
  exports: [ExtratopilotoComponent]
})

export class ExtratopilotoModule { }

编辑：

文件->“外部组件”

如果有人需要确切地知道代码是如何结束的，这里是：

import { Component, OnInit, Renderer2} from '@angular/core';

@Component({
  selector: 'app-extratopiloto',
  templateUrl: './extratopiloto.component.html',
  styleUrls: ['./extratopiloto.component.scss']
})
export class ExtratopilotoComponent implements OnInit {

  display: string = '';
  displayBody: string = '';

  displayProposal() {
    this.display = "modal-on";
    this.renderer.addClass(document.body, 'body-overflow-hidden');
  }

  hideProposal() {
    this.display = "";
    this.renderer.removeClass(document.body, 'body-overflow-hidden');
  }


  constructor(private renderer: Renderer2) { }

  ngOnInit() {
  }

}

标签： angular

解决方案

我认为与其试图将这些组件联系在一起，不如将所有逻辑包含在 1 个组件中

尝试使用 Renderer2

将其导入包含您的点击事件的组件中

export class ExtratopilotoComponent implements OnInit {    
    constructor(private renderer: Renderer2) { }

    onChangeBodyClick() {
       this.renderer.addClass(document.body, 'bodyoverflowhidden');
    }
}

这样一来，您的代码总体上更干净，您只需查看 1 个位置即可进行更改。

推荐阅读