Как использовать Angular 8 резолвер с машинописью? - PullRequest
Новая
       53

Как использовать Angular 8 резолвер с машинописью?

0 голосов
/ 02 марта 2020

Я пытаюсь создать приложение, например pastebin.com, где я могу использовать подсветку синтаксиса. Теперь я пытаюсь сделать метод обмена файлами. Я получаю все данные из. NET Core API, и ответ - именно то, что мне нужно.

Проблема в том, что когда я открываю общую ссылку, компонент инициализируется до того, как обещание будет выполнено.

Допустим, я хочу открыть следующую ссылку: http://localhost: 4200 / shared / 1

Когда я открываю ссылку, данные, где файл = 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

<code><pre class="text-white"style="color: white;">Name: {{service.sharedFormData?.Name}}
Описание: {{service.sharedFormData? .Description}} Синтаксис: {{service.sharedFormData? .Syntax}} LastModified: {{service.sharedFormData? .LastModified | дата: "ЧЧ: мм дд / мм / гггг"}} ExpirationDate: {{service.sharedFormData? .ExpirationDate | дата: "ЧЧ: мм дд / мм / гггг"}} 
<code class="hljs">{{service.sharedFormData?.Content}}</code>

Вот как выглядит URL: http://localhost: 4200 / общий / MThBU1AgLk5FVCBDb3Jl

Console log

1 Ответ

0 голосов
/ 02 марта 2020

Вы должны вернуть Observable / Promise в методе resolve(), чтобы HTTP-запрос был завершен до инициализации компонента. Также обратите внимание, что вы не должны подписываться на HTTP-вызов в методе resolve(). Просто верните это как есть. Если вы хотите регистрировать / хранить данные, используйте оператор tap() rx js.

Измените код, как показано ниже:

Resolver: 

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

Более подробную информацию о резольвере можно найти здесь .

...