Question

我正在工作角4.我的应用程序的基本结构是这样的。

AppComponent.ts

<app-header></app-header>


<router-outlet ></router-outlet>

<app-footer></app-footer>

现在，我在这里遇到了一个问题。我的菜单栏位于headrer组件中，只在我的项目中加载一次。我想在运行时更改一些菜单栏项。为此，我在header.component.ts中设置了标志。

现在，从我想要更改菜单标题的组件，我调用headercomponent.ts的函数来设置标志的值。我成功调用了该函数，它还更新了flag的值。但是html并没有改变。

这是我的 headercomponent.ts 函数，它设置了flag的值。

 setflag()
  {
    alert("sadads")
    this.flag=true


    console.log(this.flag)
    this.ref.detectChanges();
    this.ref.reattach();
  }

这是我要更新的 headercomponent 中的HTML部分。

 <ul class="dropdown-menu">
                      <li ><a [routerLink]="['/login']">Log in</a></li>

                      <li><a [routerLink]="['/register']">Sign up</a></li>
                      <li *ngIf="flag==true"><a [routerLink]="['/register']">Dashboard</a></li>

                    </ul>

和 homecomponent.ts 我正在调用此函数。

import {HeaderComponent} from "../header/header.component";
  providers: [HeaderComponent]

  constructor(private ref: ChangeDetectorRef,private comp: HeaderComponent) {

  }

  ngOnInit() {

    this.comp.setflag();
}

这会从头部调用函数并更改flag的值。但该更改值不会调用html中的更改。

任何机构都可以告诉我，如何在此场景中更新headercomponent中的html。任何帮助将受到高度赞赏。

Answer 1

只需在组件文件中执行此操作，无需使用ChangeDetectorRef。在Angular 2中，变化检测是自动的。定义类级变量标志并设置布尔值

<强> headercomponent.ts

export class HeaderComponent {

flag = false

setflag()
  {
    alert("sadads")
    this.flag=true
  }
}

<强> Plunker Plunker here...

如果您想更新其他组件的标志，请使用服务

**Service**
@Injectable()
export class FlagService {
  flag = false;

  toggleFlag() {
   this.flag = !this.flag;
 }
}

export class HeaderComponent {

 flag: boolean;

 constructor(private flagService: FlagService) {
  this.flag = this.flagService.flag;
}

}

Answer 2

您想要的唯一方法是使用服务。这并不简单，只需写一下

//shared service
@Injectable()
export class DataService {
    myVariable:any;
}

在您的组件中，使用此服务获取myVariable的值。如果需要，可以使用“getter”和“setter”

 //Any component
  @Component({..})
  export class MyComponent {
    get myVariable()
       return this.dataService.myVariable;
    }
    set myVariable(value)
       this.dataService.myVariable=value;
    }
    constructor(private dataService: DataService){ }

    myFunction()
    {
        this.myVariable="Hello World";
        //or 
        this.dataService.myVariable="Good By"
    }
  }

Angular 2-如何在更新组件的标志值后刷新HTML？

2 个答案: