Question

我使用的是角度5，我想从组件A导航到组件B。但是，每当导航到组件B时，组件都会返回除视图之外的所有内容（调用ngOnInit钩子）。仅当刷新页面时，视图才会加载。

组件A

@Component({
  template: `
    <div class="max-width">
      <div id="fetching-iframe" class="iframe-container">
        <button
          (click)="navigateToB()">
          Continue
        </button>
      </div>
    </div>
  `,
  styleUrls: ['./iframe.component.scss'],
})
export class IFrameComponent {

  ngOnInit(): void {
   console.log('A loaded')
  }

  public navigateToB(): void {
    this.router.navigateByUrl('/component-b');
  }

}

组件B

@Component({
  template: `
    <div class="max-width">
      <div id="fetching-iframe" class="iframe-container">
        <body onload="document.test.submit();">
          <form
            action="https://example.com"
            target="my-iframe"
            method="post"
            name="test"
          >
            <input
              type="hidden"
              name="payload"
              value="test"
            />
          </form>

          <iframe name="my-iframe"></iframe>
        </body>
      </div>
    </div>
  `,
  styleUrls: ['./iframe.component.scss'],
})
export class IFrameComponent {

  ngOnInit(): void {
   console.log('B loaded')
  }
}

我正在组件B中尝试执行的操作是在iframe中请求http POST，该HTTP POST返回外部页面。我试图检查页面，并在elemets选项卡中看到，该页面具有我在组件B模板中编写的html代码（所有主体，表单，输入标签等都在其中），但它不执行http当我选中“网络”标签时，发出POST请求。

如果我手动刷新页面或在浏览器中手动键入URL，视图已加载并请求http POST，问题就消失了。

除非手动重新加载页面，否则页面为空白

0 个答案: