Index.html

Question

我刚开始学习Angular，这是我关于Stackoverflow的第一篇文章，对不起，如果我的问题似乎太明显了，但是我自己却找不到答案...

该项目由两个部分组成，一个内部另一个。在“外部”上有一个<table>，我需要在它的<tr>标记上单击事件以触发将属性绑定到页面的body元素，特别是要插入一个保存到.scss全局文件中，并具有“ overflow：hidden”属性。我已经导出了外部的组件并将其导入到app.module中，尽管似乎没有什么不同。

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

Chrome浏览器的F12->

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

Index.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>

App.module

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

}

Answer 1

我认为，与其尝试将这些组件捆绑在一起，不如将所有逻辑包含在1个组件内部

尝试使用Renderer2

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

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

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

这样，您的代码总体上会更整洁，您只需要在1个地方进行更改即可。

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

Index.html

App.module

外部组件

外部模块

编辑：

1 个答案: