Question

我有一个angular 6应用程序，有一个侧边栏组件

sidebar.ts

  ngOnInit() {
    if (!Array.isArray(this.menu) || !this.menu.length) {
      const data = JSON.parse(localStorage.getItem('data'));
      this.item = data.response;
      for (let i = 0; i < this.item.menu.length; i++) {
        if (this.item.menu[i] && this.item.menu[i].section === 'left_menu') {
          if (this.menu.indexOf(this.item.menu[i].id) === -1) {
            this.menu.push(this.item.menu[i]);
          }
        }
      }
      console.log(data.response); // this is getting called twice
    }
  }

sidebar.html

<ul class="sidenav">
    <span *ngFor="let item of menu">
        <li id="{{item.id}}">
            <a href="{{item.menu_url}}">
                <i class="{{item.class_name}}"></i>
                <span>{{item.title}}</span>
            </a>
        </li>
    </span>
    <li>
        <a class="nav-link" (click)="goTo(logout)">
            <i class="fa fa-sign-out" aria-hidden="true"></i>
            <span>Log Out</span>
        </a>
    </li>
</ul>

app.html

<app-left-sidebar *ngIf="showMenu"></app-left-sidebar>
<router-outlet></router-outlet>

和app.ts

  constructor(private router: Router) {
    const login = JSON.parse(localStorage.getItem('login'));
    if (login !== undefined && login === true) {

      if (location.pathname === '/login') {
        this.router.navigate(['']);
        this.showMenu = false;
      } else {
        this.showMenu = true;
      }
    } else {
      if (location.pathname === '/login') {
        this.showMenu = false;
      } else {
        this.showMenu = true;
      }
    }
  }

我有两个问题

注销按钮未显示在侧边栏中，而是显示在登录页面上，我不知道为什么
如果我登录，则侧边栏显示正确，但是我刷新了，我收到重复的响应，并且如你所见，我尽了最大的努力将其过滤掉，这是行不通的，当我刷新时，仍然在侧边栏中看到重复的项目，可能是在app.ts上一次被调用，在sidebar.ts上一次被调用了吗？

console.log显示两个请求都来自侧边栏，同一行被调用两次。

Answer 1

能否请您通过stackblitz共享代码。您可以设置this.menu = [];在ngOnInit（）中的forloop之前。

ngOnInit() {
    if (!Array.isArray(this.menu) || !this.menu.length) {
      const data = JSON.parse(localStorage.getItem('data'));
      this.item = data.response;
      this.menu = [];
      for (let i = 0; i < this.item.menu.length; i++) {
        if (this.item.menu[i] && this.item.menu[i].section === 'left_menu') {
          if (this.menu.indexOf(this.item.menu[i].id) === -1) {
            this.menu.push(this.item.menu[i]);
          }
        }
      }
      console.log(data.response); // this is getting called twice
    }
  }

Answer 2

如果console.log被调用两次，则意味着ngOnInit被称为twicw，只有当组件ID初始化两次或可能是从2个不同的地方调用该组件时，才可能发生，或者请检查您是否在做同样的事情ngOnChanges中的操作

刷新页面时，我得到两个响应

2 个答案: