angular - 在 init 上按组件更改 css 属性

Question

我使用的是 Angular 2.4.1，我的最终 Hello World 是下一个:

我的索引由导航栏(具有显示:无)和用于呈现不同 View 的路由器导出组成。我的默认 View 是一个带有特定 View 链接的轮播。 当我单击此链接时，将加载特定 View (这是问题所在)，我也想显示导航栏(显示: block )。我被困住了，我不知道如何实现它。

我的问题是如何从第二个组件到达第一个组件中的导航栏(id，甚至类)。

我最好的方法是在其组件的 OnInit 中更改此导航栏的 css 属性。不起作用...文档无法识别。

export class SociosComponent implements OnInit {
    ngOnInit(): void {
        this.document.getElementById('nav-principal').style.display = "block";
    }
}

以下是部分代码:

应用程序组件

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

@Component({
  selector: 'my-app',
  template: `
  <ul id="nav-principal" style="display:none; background-color:transparent;" class="nav nav-tabs">
    <li role="presentation" class="active"><a routerLink="/index">Index</a><li>
    <li role="presentation"><a routerLink="/socios">Socios</a><li>
  </ul>
  <router-outlet></router-outlet>
  `
})

export class AppComponent { 
}

应用程序路由

// Importar componentes y módulos para el routing 
import { Routes, RouterModule } from '@angular/router';

// Componentes
import { SociosComponent } from './socios.component';
import { Index } from './index';

// Configuración de las rutas
const appRoutes: Routes = [
  { path: '', redirectTo: 'index', pathMatch: 'full' },
  { path: 'index', component: Index },
  { path: 'socios', component: SociosComponent },
];

export const routing = RouterModule.forRoot(appRoutes);

socios.component

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

@Component({
  selector: 'socios',
  templateUrl: '../socios.html',
})

export class SociosComponent implements OnInit {
    ngOnInit(): void {
        this.document.getElementById('nav-principal').style.display = "block";
    }
}

谢谢大家。

Answer 1

在 Angular 中，像这样直接修改 DOM 元素被认为是不好的做法。

正确的方法是将菜单状态存储在服务中，然后从组件中修改它。

菜单状态服务:

import { Injectable } from '@angular/core';

@Injectable()
export class MenuStateService {
  isActive: boolean = false;

  enable() {
    this.isActive = true;
  }

  disable() {
    this.isActive = false;
  }
}

导入到您的应用程序组件中:

import { Component } from '@angular/core';
import { MenuStateService } from './menu-state.service';

@Component({
  selector: 'my-app',
  template: `
  <ul id="nav-principal" *ngIf="menuStateService.isActive" class="nav nav-tabs">
    <li role="presentation" class="active"><a routerLink="/index">Index</a><li>
    <li role="presentation"><a routerLink="/socios">Socios</a><li>
  </ul>
  <router-outlet></router-outlet>
  `
})

export class AppComponent {
    constructor(public menuStateService: MenuStateService) {}
}

请务必将该服务添加到您的应用模块的 providers 数组中，否则您将会遇到麻烦。

然后您可以使用服务中定义的方法从任何组件启用或禁用菜单:

import { Component } from '@angular/core';
import { MenuStateService } from './menu-state.service';

@Component({
  selector: 'socios',
  templateUrl: '../socios.html',
})

export class SociosComponent implements OnInit {
    constructor(private menuStateService: MenuStateService) {}

    ngOnInit(): void {
        this.menuStateService.enable();
    }
}

现在看起来似乎有点矫枉过正，但随着应用程序的增长，您可能会发现需要存储有关菜单的更多信息，或者添加其他功能。那么你就已经有一个地方可以放它了。