如何在打字稿中使用 Angular 8 解析器？

Question

我正在尝试制作一个类似于 pastebin.com 的应用程序，我可以在其中使用语法高亮显示。现在我正在尝试制作共享文件方法。我正在从 .NET Core API 获取所有数据，响应正是我所需要的。

问题是当我打开共享 link 组件在 promise 被解析之前被初始化。

假设我想打开以下 link： http://localhost:4200/shared/1

当我打开 link 时，file=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);
    });
      }
}

app-routing.module.ts

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');
  }
}

fileshare.component.html

<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>

这是 URL 的样子： http://localhost:4200/shared/MThBU1AgLk5FVCBDb3Jl

Answer 1

您必须在 resolve() 方法中 return Observable/Promise 以便在组件初始化之前完成 HTTP 请求。另请注意，您不应订阅 resolve() 方法中的 HTTP 调用。 return 就这样吧。如果要 log/store 数据，请使用 tap() rxjs 运算符。

修改您的代码如下：

解析器：

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

  resolve(route: ActivatedRouteSnapshot){
    console.log('Logging collected route parameter', route.params['file']);
    return this.http.
      get(this.BaseURL + '/Share?IdentityString=' + route.params['file'])
      .pipe(tap(res => console.log('Response from HTTP req: ', res)));
  }
}

分量：

export class FileShareComponent implements OnInit {

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

  ngOnInit() {
    console.log('Component initialized');
    this.route.data.subscribe((data: { shared: any }) => {
      let formData = data.shared as ShareModel;
      // perform your logic now
    });
  }
}

可以找到有关解析器的更多信息here。

如何在打字稿中使用 Angular 8 解析器？

How to use Angular 8 resolver with typescript?

asynchronous

resolve

typescript

angular

angular-resolver