如何将Angular 8解析器与typescript一起使用？

我正在尝试制作一个像pastebin.com一样的应用程序，在这里我可以使用语法高亮显示。现在我正在尝试创建共享文件方法。我从.NET核心API获取所有数据，响应正是我所需要的

问题是，当我打开共享链接时，组件会在承诺得到解决之前被初始化

假设我想打开以下链接：

当我打开链接时，文件=1中的数据被提取并放置在模型中。然后我希望加载组件并显示html

我不明白解析器是如何工作的，我能做什么？谢谢

user.service.ts

@Injectable({
    providedIn: 'root'
})
export class UserService implements Resolve<any> {

resolve(route: ActivatedRouteSnapshot){
        console.log('Logging collected route parameter', route.params['file']);
        this.http.get(this.BaseURL + '/Share?IdentityString=' + route.params['file'])
        .subscribe(res =>{
        this.sharedFormData = res as ShareModel;

        console.log(this.sharedFormData);
    });
      }
}

export const routes: Routes = [
  { 
    path: 'shared/:file',
    component: FileShareComponent,
    resolve: {
      shared: UserService
    }
  }
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

fileshare.component.html

export class FileShareComponent implements OnInit {

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

  ngOnInit() {
    console.log('Component initialized');
  }
}

<pre class="text-white"style="color: white;">Name: {{service.sharedFormData?.Name}}</pre>
<pre style="color: white;">Description: {{service.sharedFormData?.Description}}</pre>
<pre style="color: white;">Syntax: {{service.sharedFormData?.Syntax}}</pre>
<pre style="color: white;">LastModified: {{service.sharedFormData?.LastModified | date: "HH:mm dd/MM/yyyy"}}</pre>
<pre style="color: white;">ExpirationDate: {{service.sharedFormData?.ExpirationDate | date: "HH:mm dd/MM/yyyy"}}</pre>
<pre><code class="hljs">{{service.sharedFormData?.Content}}</code></pre>

fileshare.component.html

export class FileShareComponent implements OnInit {

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

  ngOnInit() {
    console.log('Component initialized');
  }
}

<pre class="text-white"style="color: white;">Name: {{service.sharedFormData?.Name}}</pre>
<pre style="color: white;">Description: {{service.sharedFormData?.Description}}</pre>
<pre style="color: white;">Syntax: {{service.sharedFormData?.Syntax}}</pre>
<pre style="color: white;">LastModified: {{service.sharedFormData?.LastModified | date: "HH:mm dd/MM/yyyy"}}</pre>
<pre style="color: white;">ExpirationDate: {{service.sharedFormData?.ExpirationDate | date: "HH:mm dd/MM/yyyy"}}</pre>
<pre><code class="hljs">{{service.sharedFormData?.Content}}</code></pre>

Name:{{service.sharedFormData？.Name}
描述：{{service.sharedFormData？.Description}
语法：{{service.sharedFormData？.Syntax}
LastModified:{{service.sharedFormData？.LastModified |日期：“HH:mm dd/mm/yyyy”}
过期日期：{service.sharedFormData？.ExpirationDate |日期：“HH:mm dd/mm/yyyy”}
{{service.sharedFormData？.Content}}

以下是URL的外观：

---

您必须在

resolve（）

方法中返回可观察/承诺，以便在初始化组件之前完成HTTP请求。还请注意，您不应该订阅

resolve（）

方法中的HTTP调用。照原样还就行了。如果要记录/存储数据，请使用

tap（）

rxjs操作符

按如下方式修改您的代码：

解析器：

@可注入({
providedIn:'根'
})
导出类UserService实现解析