Проблемы с маршрутизацией при использовании угловых элементов - PullRequest
Новая
       50

Проблемы с маршрутизацией при использовании угловых элементов

0 голосов
/ 27 сентября 2019

У меня есть два угловых приложения (родитель, ребенок).Я создаю пользовательский элемент (используя угловые элементы) из дочернего приложения и внедряю его в родительское приложение.Дочернее приложение имеет две формы.Первая форма направляется ко второй по нажатию кнопки.

Проблема, с которой я сталкиваюсь, связана с маршрутизацией дочернего приложения, которая поясняется ниже на примере.

Родительское приложение вызывает дочернее приложение нажатием кнопки (кнопка - пользовательский элемент) черезфайл .js.

MainApp

HTML под кнопкой пользовательского элемента взят из дочернего приложения

ChildApp called

Первый раз, когда ящелкните тест, он перейдет к Form2

Form2 rendered

Если я снова щелкну по пользовательскому элементу, он перейдет к Form1, но маршрут по нажатию кнопки тестирования (route to form2) перестанет работать.Если вы видите, что ссылка изменяется, но форма не обрабатывается.

ChildApp called

Form2NavigationIssue

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: \['./app.component.css'\]
})
export class AppComponent implements OnInit {
  title = 'mainApp';
  constructor(private router: Router) {}

  ngOnInit(): void {  }

  navigate() {
    this.router.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };
    const test = new Date().getTime();
    this.router.navigate(\['./custom-element'\], {queryParams: {test}});
  }
}


custom-element.component.ts

import { Component, OnInit } from '@angular/core';
import './angularelementstest';
import {Router} from '@angular/router';

@Component({
  selector: 'app-view-schedule',
  templateUrl: './custom-element.component.html',
  styleUrls: \['./custom-element.component.css'\]
})
export class CustomElementComponent implements OnInit {


 constructor(private router: Router) {}


  ngOnInit() {
  }
}

custom-element.component.html
<test-element></test-element>

Я ожидаю, что маршруты будут работать нормальнопри повторном нажатии на компонент.

...