Обновить HTML-компонент Angular 6 - PullRequest
Новая
       14

Обновить HTML-компонент Angular 6

3 голосов
/ 14 октября 2019

Я работаю с Angular 6, и у меня есть следующий компонент

MainComponent.ts, который имеет этот код на ngOnInit: 

ngOnInit() {
   console.log('OnInit');    
   this.route.params.subscribe(params => {
     if (params['id'] != null) {
       this.id= params['id']
     }
   });
 }

, а затем на MainComponent.HTML 

<DataComponent [id]="id"></DataComponent>
<TableComponent [id]="id"></TableComponent>
<FieldComponent [id]="id"></FieldComponent>

Маршрут: http://localhost:4200/Data/77

Все работает отлично, пока мне не понадобится клонировать или изменить идентификатор, поэтому мне нужно, чтобы MainComponent обновил все идентификаторы .. Я сделал следующий код: 

this.router.navigate(['/Data', result.id_cloned_data]);

Редактировать: Маршруты 

const appRoutes: Routes = [
  { 
    path: 'Formula/:idFormula',
    component: FormulaMainComponent,
    pathMatch: 'full'
   },
  { path: 'Formula', component: FormulaMainComponent, pathMatch: 'full' },
  { path: '', component: FormulaMainComponent, pathMatch: 'full' }
];

URL-адрес изменяется, например: http://localhost:4200/Data/399, но MainComponent не обновляется. Я сделал EventEmitter, передав новый идентификатор в MainComponent, но он все еще не работает, и я уже попробовал AppRoutes наSameUrlNavigation: 'reload'.

Что я делаю не так? Разве это не нужно переопределять, чтобы каждый компонент вызывал свой Get from API?

1 Ответ

0 голосов
/ 14 октября 2019

Вариант 1: 

public bookId$: Observable<string> // 'id' is bad name for variable, remember about code readability;

ngOnInit() {  
    this.bookId$ = this.activatedRoute.paramMap.pipe(
      map((param) => {
        return param.get('BOOK_ID');
      }),
    );
 }

шаблон компонента: 

<DataComponent [bookId]="bookId$ | async"></DataComponent>
<TableComponent [bookId]="bookId$| async"></TableComponent>
<FieldComponent [bookId]="bookId$ | async"></FieldComponent>.

Вариант 2:

1) шаблон DataComponent: 

<router-outlet></router-outlet>

2) пример конфигурации маршрутизатора: 

  {
    children: [
      {
        component: DataChildComponent,
        path: ':BOOK_ID',
      },
    ],
    component: DataComponent,
    path: 'Data',
  },

3) шаблон DataChildComponent: 

<DataComponent [bookId]="bookId$ | async"></DataComponent>
<TableComponent [bookId]="bookId$| async"></TableComponent>
<FieldComponent [bookId]="bookId$ | async"></FieldComponent>

4) DataChildComponent: 

public bookId$: Observable<string>;

ngOnInit() {  
    this.bookId$ = this.activatedRoute.paramMap.pipe(
      map((param) => {
        return param.get('BOOK_ID');
      }),
    );
 }

Надеюсь, это поможет!

...