Question

我正在使用Angular 2.4.1，我的最后一个Hello World是下一个：

我的索引由导航栏（显示：无）和路由器插座组成，用于显示不同的视图。我的默认视图是一个带有特定视图链接的轮播。当我点击此链接时，将加载特定视图（这是问题），我想显示导航栏（显示：块）。我被卡住了，我无法弄清楚如何实现它。

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

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

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

以下是代码的一部分：

app.component

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

app.rounting

// 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

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

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

菜单状态服务：

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

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

Answer 2

您不希望document使用引用当前组件类的this限定document在全局范围内，请执行以下操作

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

在init上按组件更改css属性

2 个答案: