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

我有一个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
    }
  }

app.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-left-sidebar *ngIf="showMenu"></app-left-sidebar>
<router-outlet></router-outlet>

我有两个问题

• “注销”按钮没有显示在侧边栏中，而是显示在登录页面上，我不知道为什么
• 如果我登录，侧边栏显示正确，但我刷新，我收到重复的响应，正如你所看到的，我尽了最大努力过滤掉它们，它不起作用，我刷新时仍在侧边栏中看到重复的项目，可能是因为它在

  app.ts

  和

  侧边栏.ts

  上被调用过一次吗

---

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

请通过stackblitz共享代码。您可以设置此选项。菜单=[]；在ngOnInit（）中的forloop之前

ngOnInit（）{
如果（！Array.isArray（this.menu）| |！this.menu.length）{
const data=JSON.parse（localStorage.getItem（'data'））；
this.item=data.response；
this.menu=[]；
for（设i=0；i

您可以通过stackblitz分享代码吗。您可以设置此选项。菜单=[]；在ngOnInit（）中的forloop之前

ngOnInit（）{
如果（！Array.isArray（this.menu）| |！this.menu.length）{
const data=JSON.parse（localStorage.getItem（'data'））；
this.item=data.response；
this.menu=[]；
for（设i=0；i

如果console.log被调用两次，这意味着ngOnInit被调用两次，只有在组件id被初始化两次或可能是组件被从两个不同的地方调用时才会发生，或者如果console.log被调用两次，请检查您是否在ngOnChanges中执行相同的操作，这意味着ngOnInit被称为twicw，只有当组件id初始化两次或可能是从两个不同的位置调用组件时，才会发生这种情况，或者请检查您是否在ngOnChanges中执行相同的操作

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

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