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

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

该项目由两个部分组成，一个在另一个内部。 “outside”一个上有一个

，我需要在它的

标记上有一个（单击）事件来触发一个属性绑定到页面的body元素中，特别是插入一个保存到.scss全局文件中的类，属性为“overflow:hidden”。 我已经导出了outside的组件，并将其导入app.module，但这似乎没有什么不同

Chrome读取html代码时，就像没有任何括号一样

Chrome的F12->

Index.html

文达斯时间

应用程序模块 外部组件 外部模块 编辑： 文件->“外部组件”

如果有人需要详细了解代码是如何结束的，请参阅：

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() {
  }

}

---

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

尝试使用渲染器2

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

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

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

---

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

表达式绑定位于任何角度组件之外。所以它不能工作。您只能在组件模板内使用属性绑定。好的，我不知道，谢谢！成功了！只是做了一些修改。下一步是了解这个我以前不知道的渲染器2！非常感谢你！！！

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() {
  }

}

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

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