Angular 5 Databinding Не работает при использовании router.navigate - PullRequest
Новая
       11

Angular 5 Databinding Не работает при использовании router.navigate

0 голосов
/ 05 мая 2018

Я пытаюсь перейти на другой маршрут, используя router.navigate. Маршрут загружается нормально, и я получаю данные из моего API, но я не могу получить данные для печати в файле шаблона. Работает нормально, когда страница перезагружается, но не с пользовательским кодом для навигации. 

import {AfterViewInit, Component, OnInit} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {ActivatedRoute, Router} from "@angular/router";

@Component({
  selector: 'app-notice-edit',
  templateUrl: './notice-edit.component.html',
  styleUrls: ['./notice-edit.component.css']
})
export class NoticeEditComponent implements OnInit,AfterViewInit {

  notice_id: string;
  notice_title: string;
  notice_description: string;
  notice_expiry_date: string;
  notice_type:string;

  constructor(private http:HttpClient, private router: Router, private route:ActivatedRoute) {
    this.router.routeReuseStrategy.shouldReuseRoute = function() {
      return false;
    };
    route.params.subscribe(params=>{
      this.notice_id = params['id'];
      this.ngOnInit();
    })
  }

  ngOnInit() {
    this.http.get('http://localhost:3000/api/notices/'+this.notice_id).subscribe(data=>{
      this.notice_title = data.notice_title;
      this.notice_expiry_date = data.expiry_date;
      this.notice_type= data.notice_type;
      console.log(data);
    });
  }

  ngAfterViewInit(){
    alert(1);
  }

}

<p>{{notice_type}}</p>
<form>
  <input type="text" name="notice_title" [(ngModel)]="notice_title" #ctrl="ngModel"/>
  <input type="text" name="notice_expiry_date" [(ngModel)]="notice_expiry_date"/>
  <select name="notice_type" [(ngModel)]="notice_type">
    <option value="Managerial Notice" >Managerial Notice</option>
    <option value="Common Notice" >Common Notice</option>
    <option value="General Meeting Minutes">General Meeting Minutes</option>
  </select>
</form>

Этот компонент затем вызывается с помощью привязки события jQuery Click, например: 

$(document).on('click', '.edit_click',function(){
    object.router.navigate(['/notices','edit',$(this).attr('id')]);
});
...