Angular 承诺解决后如何加载html页面？_Angular_Typescript_Dependency Injection_Promise_Angular Resolver

Angular 承诺解决后如何加载html页面？

angular typescript dependency-injection

Angular 承诺解决后如何加载html页面？,angular,typescript,dependency-injection,promise,angular-resolver,Angular,Typescript,Dependency Injection,Promise,Angular Resolver,我正在尝试使用Angular和Typescript从ASP.NET核心API向html组件显示一些数据，响应返回正确的值，承诺工作正常问题是在解决承诺之前加载html页面，因此显示的值未定义承诺解决后，我可以使用什么来加载页面？如何加载 fileshare.component.ts export class FileShareComponent implements OnInit { constructor( private route: ActivatedRoute,

我正在尝试使用Angular和Typescript从ASP.NET核心API向html组件显示一些数据，响应返回正确的值，承诺工作正常

问题是在解决承诺之前加载html页面，因此显示的值未定义

承诺解决后，我可以使用什么来加载页面？如何加载

fileshare.component.ts

export class FileShareComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private service: UserService,
    private http: HttpClient
  ) {

    const file: string = this.route.snapshot.queryParamMap.get('file');

    this.http.get(this.service.BaseURL + '/Share?IdentityString=' + file)
      .toPromise()
      .then(res => {
        this.service.sharedFormData = res as ShareModel;
        console.log(this.service.sharedFormData);
      });

  }

  ngOnInit() {

  }


}

<pre><code class="hljs">Name:
{{service.sharedFormData.Name}}</code></pre>
<pre><code class="hljs">Description:
{{service.sharedFormData.Description}}</code></pre>
<pre><code class="hljs">Syntax:
{{service.sharedFormData.Syntax}}</code></pre>
<pre><code class="hljs">LastModified:
{{service.sharedFormData.LastModified | date: "HH:mm dd/MM/yyyy"}}</code></pre>
<pre><code class="hljs">Content:
{{service.sharedFormData.Content}}</code></pre>
<div class="form-group text-center mt-4">
    <button class="btn btn-dark" (click)="this.service.raw()" type="submit"><i class="fas fa-database"></i>
        Raw</button>
</div>

fileshare.component.html

由于

FileShareComponent

是触发服务调用的组件，因此除非创建更复杂的嵌套组件体系结构，否则在该调用完成之前无法阻止组件初始化

我将隐藏这些值，直到可观察到的结果解决为止。我看不出有什么迫切的理由将可观察的转化为承诺。大概是这样的：

现在，只需将显示模板包装在一个隐藏的div中，直到加载数据：


名称：
{{service.sharedFormData.Name}


说明：
{{service.sharedFormData.Description}}
语法：
{{service.sharedFormData.Syntax}}

上次修改：
{{service.sharedFormData.LastModified}日期：“HH:mm dd/mm/yyyy”}

内容：
{{service.sharedFormData.Content}

未经加工的

根据你目前的结构，我认为这是最简单的方法。如果我是从头开始构建它，我会考虑使用。

或者更简单地说，您可以在html模板中使用elvis操作符。

fileshare.component.html

名称：
{{service？.sharedFormData？.Name}


说明：
{{service？.sharedFormData？.Description}}
语法：
{{service？.sharedFormData？.Syntax}

上次修改：
{{服务？.sharedFormData？.LastModified |日期：“HH:mm dd/mm/yyyy”}

内容：
{{service？.sharedFormData？.Content}

未经加工的

您是否在

console.log（this.service.sharedFormData）中获取值？尝试将this.changeDetectorRef.detectChanges（）
放在then（）
中this.service.sharedFormData=res之后阻塞为ShareModel，但不应该是必需的。试一下，让我知道console.log（this.service.sharedFormData）中有值；但这些值在html请求后会显示在控制台中。现在我来看看路由器解析器。
export class ShareModel {
    Id:number;
    Name: string;
    Description: string;
    Syntax: string;
    IdentityString:string;
    LastModified: string;
    Content: string;
    FileId: number;
}

export class FileShareComponent implements OnInit {
  // create a variable to determine whether screen is initialized
  screenInitialized = false;
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private service: UserService,
    private http: HttpClient
  ) {
    const file: string = this.route.snapshot.queryParamMap.get('file');
    this.http.get(this.service.BaseURL + '/Share?IdentityString=' + file)
      // subscribe to Observable instead of converting it to a promise 
      .subscribe(res => {
        this.service.sharedFormData = res as ShareModel;
        // toggle initialized property
        this.initialized = true;
        console.log(this.service.sharedFormData);
      });
  }
  ngOnInit() {
  }
}

<div *ngIf="initialized">
    <pre><code class="hljs">Name:
    {{service.sharedFormData.Name}}</code></pre>
    <pre><code class="hljs">Description:
    {{service.sharedFormData.Description}}</code></pre>
    <pre><code class="hljs">Syntax:
    {{service.sharedFormData.Syntax}}</code></pre>
    <pre><code class="hljs">LastModified:
    {{service.sharedFormData.LastModified | date: "HH:mm dd/MM/yyyy"}}</code></pre>
    <pre><code class="hljs">Content:
    {{service.sharedFormData.Content}}</code></pre>
    <div class="form-group text-center mt-4">
        <button class="btn btn-dark" (click)="this.service.raw()" type="submit"><i class="fas fa-database"></i>
            Raw</button>
    </div>
</div>

<pre><code class="hljs">Name:
{{service?.sharedFormData?.Name}}</code></pre>
<pre><code class="hljs">Description:
{{service?.sharedFormData?.Description}}</code></pre>
<pre><code class="hljs">Syntax:
{{service?.sharedFormData?.Syntax}}</code></pre>
<pre><code class="hljs">LastModified:
{{service?.sharedFormData?.LastModified | date: "HH:mm dd/MM/yyyy"}}</code></pre>
<pre><code class="hljs">Content:
{{service?.sharedFormData?.Content}}</code></pre>
<div class="form-group text-center mt-4">
    <button class="btn btn-dark" (click)="this.service.raw()" type="submit"><i class="fas fa-database"></i>
        Raw</button>
</div>