Home / Questions / 91806
Accepted
Johnny Pachecp
Asked: 2020-08-01 08:57:00 +0800 CST 2020-08-01 08:57:00 +0800 CST

如何重新渲染 Angular 4 组件？

  • 772

我从 ionic 开始，我有一个 menuToggle 仅在用户登录时显示，条件在菜单模板中，我使用 *ngIf="login" 来判断它是否显示，但我没有'无法制作 用户登录后，将显示菜单。我来自反应的世界，当改变组件的状态时，它会根据它的变化进行渲染，但是在角度上，我如何在改变值时更新视图？

ionic

1 Answers

  1. Best Answer

    类似的事情发生在我身上，当我需要在登录时隐藏导航栏时，我通过定义一个组件并在你想要使用它的根控制器模板中实例化它来解决它（通常）app.component.html

    为了保持配置活动并能够处理显示（我走得更远并添加了可配置按钮等），请定义一个服务以及您要保留的变量，然后它只会从您的控制器调用服务定义为查询变量以及从任何控制器调用服务以修改其状态，这将自动反映。

    // navbar.component.ts

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

import { NavbarService } from './navbar.service';


@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.scss']
})
export class NavbarComponent implements OnInit { 
    constructor (private navbarService: NavbarService) {}

    public mostrarPanel() {
        return this.navbarService.mostrarPanel;
    }
}

    模板

    // navbar.component.html

<div *ngIf="mostrarPanel()">
</div>

    服务

    // navbar.service.ts

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

@Injectable()
export class NavbarService { 
    public mostrarPanel: boolean;
}

    我不知道这是否是最好的方法，但是从这里您可以使用相当动态的组件，并通过修改服务中的变量来管理它

    • 1