Question

我从组件获取数据时遇到问题。这是我的代码段：

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { AuthoritiesConst } from 'app/shared/util/authorities-const';
import { IMenuItem } from 'app/shared/services/navigation.service';
import { ProjectComponent } from '../../module-cpms/views/project/project.component';
import { IProject } from 'app/module-cpms/model/project.model';
@Component({
    selector: 'jhi-appmenu',
    templateUrl: './menu.component.html',
})
export class MenuComponent implements OnInit, AfterViewInit {

    @ViewChild(ProjectComponent) project: any;


    menus: IMenuItem[];
    projectDetail: IProject;

    constructor() { }

    ngOnInit() {
        this.menus = [
            {
                name: 'title',
                state: ['/project'],
            },
            {
                name: 'company',
                state: ['/company'],
                roles: [
                    AuthoritiesConst.ROLE_ADMIN,
                    AuthoritiesConst.ROLE_BO,
                    AuthoritiesConst.ROLE_CS,
                    AuthoritiesConst.ROLE_CA,
                ],
            },
        ];


    }

    ngAfterViewInit() {
        this.projectDetail = this.project.project;
        console.log(this.project);
    }

    getMenusItem() {
        return this.menus;
    }
}

这是收集数据的父组件：

 ngOnInit() {
    this.route.data.subscribe(({ project }) => {
      this.project = project;
    });

  }

但是在上面的menu.components.ts中，我没有定义。我做错了什么？有什么建议吗？我真正想要的是，当用户更改路由时，某些标头元素会从父组件中获取一些信息。但是，当我尝试从父母那里管理project时，可以正确地给我数据。但是，当我将此数据传递给子级menu.components时，它会给出undefined。

Answer 1

您可以简单地从菜单组件中收听路线

@Component({
    selector: 'jhi-appmenu',
    templateUrl: './menu.component.html',
})
export class MenuComponent implements OnInit, AfterViewInit {
    menus: IMenuItem[];
    projectDetail: IProject;

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.menus = [
            {
                name: 'title',
                state: ['/project'],
            },
            {
                name: 'company',
                state: ['/company'],
                roles: [
                    AuthoritiesConst.ROLE_ADMIN,
                    AuthoritiesConst.ROLE_BO,
                    AuthoritiesConst.ROLE_CS,
                    AuthoritiesConst.ROLE_CA,
                ],
            },
        ];


        this.route.data.subscribe(({ project }) => {
          this.projectDetail = project;
        });
    }

    getMenusItem() {
        return this.menus;
    }
}

将ActivatedRoute插入菜单组件中（我假设route就是项目组件中的内容，我已经有一段时间没有使用Angular了。如果不是，请使用任何东西您当前在项目组件内部使用）。

完全像在ngOnInit内的项目组件中一样，侦听数据更改。

从菜单中删除@ViewChild和ngAfterViewInit，这些部分不再需要。

从组件中获取数据

1 个答案: