标签: ngoninit

Angular ngOnInit默认提供生命周期钩子.

ngOnInit如果我们已经有了,为什么要使用constructor？

如果我希望每次加载组件时都会发生函数x,无论是第一次加载,我都会导航到另一个站点并导航回来,或者是组件第五次加载.

我应该把函数x放入什么？组件构造函数还是OnInit？

我router.navigate在同一页面上调用一些查询字符串参数.在这种情况下,ngOnInit()不会打电话.它是默认还是我需要添加其他内容？

我无法理解ngOnInit和之间的区别ngAfterViewInit.

我发现它们之间唯一的区别是@ViewChild.根据以下代码,elementRef.nativeElement其中的内容是相同的.

我们应该使用什么场景ngAfterViewInit？

@Component({
  selector: 'my-child-view',
  template: `
  <div id="my-child-view-id">{{hero}}</div>
  `
})
export class ChildViewComponent {
  @Input() hero: string = 'Jack';
}

//////////////////////
@Component({
  selector: 'after-view',
  template: `
    <div id="after-view-id">-- child view begins --</div>
      <my-child-view [hero]="heroName"></my-child-view>
    <div>-- child view ends --</div>`
   + `
    <p *ngIf="comment" class="comment">
      {{comment}}
    </p>
  `
})
export class AfterViewComponent implements AfterViewInit, OnInit {
  private prevHero = '';
  public heroName = 'Tom';
  public comment = '';

  // …

我试图创建新的组件,但它的ngOnInit()方法被调用两次,我不知道为什么会发生这种情况？这里我创建了一个名为ResultComponent的组件,它从名为mcq-component的父组件中获取@Input. 这是代码:

父组件(MCQComponent)

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

@Component({
    selector: 'mcq-component',
    template: `
        <div *ngIf = 'isQuestionView'>
            .....
        </div>
        <result-comp *ngIf = '!isQuestionView' [answers] = 'ansArray'><result-comp>
    `,
    styles: [
        `
            ....
        `
    ],
    providers: [AppService],
    directives: [SelectableDirective, ResultComponent]
})
export class MCQComponent implements OnInit{
      private ansArray:Array<any> = [];
    ....
    constructor(private appService: AppService){}
    ....
}

子组件(result-comp)

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

@Component({
    selector:'result-comp',
    template: `
        <h2>Result page:</h2>

    ` …

我正在构建一个版本为beta.8的Angular 2应用程序.
在这个应用程序中,我有一个实现OnInit的组件.
在这个组件中我有函数ngOnInit,但从不调用ngOnInit函数.

import { Component, OnInit } from 'angular2/core';

@Component({
  templateUrl: '/app/html/overview.html'
})

export class OverviewComponent implements OnInit {
  ngOnInit() {
    console.log('ngOnInit');
  }
}

应用程序的路由:

@RouteConfig([
  {
    path: '/overview',
    name: 'Overview',
    component: OverviewComponent
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginComponent
  },
  {
    path: '/register',
    name: 'Register',
    component: RegisterComponent,
    useAsDefault: true
  }
])

检查用户是否已登录LoginComponent和RegisterComponent.
如果用户已登录,则组件将使用以下方式重定向到Overview : router.navigate(['Overview']).
如果我使用Overview路由作为默认路由,我会在控制台中看到ngOnInit.
所以我重定向我的页面的方式似乎是问题.
如何重定向到Overview页面并调用ngOnInit函数？

无论是RegisterComponent和LoginComponent使用

ngOnInit() {
  this._browser.getStorageValue('api_key', api_key => {
    if (api_key) {
      this._browser.gotoMain();
    }
  }) …

我有3个选项卡,其中一个选项卡显示一个包含员工列表的表.第一次加载时工作正常.ngOnInit使用http get从服务器获取数据.之后,当我点击添加新员工打开一个表单,该表单从用户那里获取输入,当点击该提交时,我调用一个调用http post服务的函数将该数据发布到我的服务器,在那里它插入记录然后在那之后它被重定向回员工组件,但是现在已经加载了该员工组件,除非我重新编译我的代码,否则我看不到我在表中插入的新记录.

employee.component.ts(加载员工表)

import { Component, OnInit, OnDestroy } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {

public employeeObj:any[] = [{emp_id:'',empname:'',joindate:'',salary:''}] ;
constructor(private employeService:EmployeeService) { }

ngOnInit() {    
this.employeService.getEmployees().subscribe(res => this.employeeObj = res);
}

}

form.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { EmployeeService } from '../../employee.service';
import { Router } from '@angular/router';

@Component({
    selector: …

我知道这在网上和互联网上都有发布，但我读了很多不同的东西，我现在有点困惑。

2 个问题-

1. 订阅我的组件的最佳位置是 constructor() 还是 NgOnInit()？
2. 订阅 Observable 时是否应该使用管道，以便 Angular 可以销毁它，或者我不必使用 ngondestroy？有点困惑为什么订阅后还有管道？

这是我的一项服务的示例，其中在我的导航栏组件中，我订阅监听来自服务的窗口大小更改。

在我的构造函数中，我有这个 -

this.responsiveService.getMobileStatus()
  .subscribe(mobileStatus => {
    this.isMobile = mobileStatus.status;
    if (mobileStatus.width < 568) {
      this.inputPlaceholder = this.placeholderWithSearch;
    } else {
      this.inputPlaceholder = this.placeholderWithoutSearch;
    }
  });

我有一个非常奇怪的问题,Angular 2路由到我ngOnInit在路由到的组件中的两次被调用,并且浏览器中的路由被重置为原始路由.

我有一个NotificationListComponent和NotificationEditComponent一个MaintenanceModule.

在我的根目录中AppModule,我设置了RouterModule将任何未映射的路由重定向到/maintenance/list.

app.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot([
      {path: "", redirectTo: "maintenance/list", pathMatch: "full"},
      {path: "**", redirectTo: "maintenance/list", pathMatch: "full"}
    ], {useHash: true}),
    CoreModule.forRoot({notificationUrl: "http://localhost:8080/notification-service/notifications"}),
    MaintenanceModule
  ],
  providers: [NotificationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

而且我/maintenance/list在我的路线中定义了MaintenanceModule指向我NotificationListComponent的/maintenance/edit/:id路线,以及指向我的路线NotificationEditComponent.

maintenance.module.ts:

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      {path: "maintenance/list", component: …

如果我称之为ngOnInit(),使可观察到的调用来获取数据的功能,是ngOnInit的this.getSomething()调用还是异步或不ngOnInit等到this.getSomething()返回一个结果？基本上"doSomethingElse"在this.getSomething()完成之前或之后在ngOnInit()中执行了吗？

ngOnInit() {
    this.getSomething();
    doSomethingElse;
}

getSomething() {
    this.someService.getData()
        .subscribe(
            result => {
                this.result = result;
            },
    error => this.errorMessage = <any>error);
}