角度错误：无法匹配任何路线。网址段：“空”

Question

我创建了一个基本的 Angular 页面，它从 URL 中获取一个 ID（一个 guid）并使用该 ID 来提供 API 调用。我过去做过类似的页面，没有问题。但出于某种原因，这个人似乎不想在播放 YouTube 视频时打球。

当我将 You Tube URL 输出到控制台时，它显示没有问题，但是当我对其进行清理并将 URL 发布到 iframe 嵌入的 src 属性时，它不会显示。但是（这就是奇怪的地方）如果我将 API 中的描述从 {{session?.SessionDescription}} 更改为 {{session.SessionDescription}}，则会显示视频。

无论我使用哪一个，都会加载描述文本。但是，如果我不包含问号，我会收到一个控制台错误，即即使它在屏幕上，也无法加载描述。

如果可能的话，我只想加载两个都没有控制台错误。

HTML：

<nav class="pure-drawer" data-position="left">
    <h1>What is 3D Printing?</h1>
    <p>{{session?.SessionDescription}} {{session?.SessionGains}}</p>
</nav>   

<div class="pure-pusher-container">
    <div class="pure-pusher">
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" [src]="vidUrl" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

打字稿：

getCurrentSession(){
    this.sub = this.route.params.subscribe(params => {
      this.id = params['id']; 
      this._wmapi
      .getService("Session/" + this.id)
      .then((result) => {
        this.session = result;
        this.vidUrl = this.sanitizer.bypassSecurityTrustResourceUrl(result.SessionVideo);
        this.getSessionResources(this.id);
      })
      .catch(error => console.log(error));
    });
  }

Answer 1

我猜如果你不使用问号，它就会卡在

<p>{{session.SessionDescription}} {{session?.SessionGains}}</p>

因为会话在开始时没有定义，并且不会继续到iframe。当你得到会话时，它会刷新组件，iframe 会得到一个真实的资源 url。

但是，当你使用问号时，这行不会出错：

<p>{{session?.SessionDescription}} {{session?.SessionGains}}</p>

它会加载带有undefined url 的iframe，因为它还没有定义（因为你还没有从API 得到响应）。然后，不知何故，它无法检测到更改并刷新iframe。

如果我的猜测是正确的，您可以通过以下方式解决此问题：

<nav class="pure-drawer" data-position="left">
    <h1>What is 3D Printing?</h1>
    <p>{{session?.SessionDescription}} {{session?.SessionGains}}</p>
</nav>   

<div class="pure-pusher-container">
    <div class="pure-pusher" *ngIf="vidUrl"> <!-- NGIF here or in iframe -->
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" [src]="vidUrl" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

请让我知道这是否可以更新我的答案。祝你好运！