Question

我正在从事能够在Angular模板中加载外部文件并读取外部文件属性的项目。接下来，我尝试在服务中使用带有延迟列表的click compare属性，并将页面加载到同一routeoutlet中，但是我的页面作为新的URL加载像：abc.com/sites/news

但是我希望它与abc.com/sites/sitename /＃/ answer / news

一起加载

不确定这里出什么问题了吗？我对angular还是陌生的，在angular中加载外部文件有很多障碍。

已更新 我能够部分解决该问题，现在可以通过更新html属性在组件内进行路由。但是如何将html属性与服务对象列表进行比较，然后路由就会发生。更新了代码–

任何指针都会有所帮助。

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template:`
    <router-outlet></router-outlet>
  `
})

export class AppComponent {
  title = 'Demo';
}

faq.component.ts

import { Component, OnInit } from '@angular/core';
import { FaqService } from './faq.service';
import { Router} from '@angular/router';

@Component({
  selector: 'app-faqlist',
  templateUrl: './faqlist.component.html',
  styleUrls: ['./faqlist.component.css'],

})
export class FaqlistComponent implements OnInit {

  faqlists = [];
  faqlist;

  constructor(    
    private _Faqservice:FaqService, 
){}

  ngOnInit() {
    this.getFaqList();
    //this.getRouteData();
    }

  getFaqList(): void{
    this._Faqservice.getFaqList()
        .then(faqlists =>this.faqlists = faqlists)
  }
}

faq.component.html

//similar code is deep within the external page code
        <a href="#/answer/news">
          Highlight me too!
        </a>
    //external page code
        <div class="action">
          <div id="holder">
          </div>
        </div>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FaqlistComponent } from './faqlist.component'
import { AnswerComponent } from './answer.component';

const appRoutes: Routes = [
    { path: '', redirectTo: 'faqlist', pathMatch: 'full' },
    { path: 'faqlist', component: FaqlistComponent},
    { path: 'answer/:id', component: AnswerComponent }
  ];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, {useHash:true})],
  exports: [RouterModule] 
  })

  export class AppRoutingModule { }

faq.service.ts

import { Injectable } from '@angular/core';
import * as $ from 'jquery';

@Injectable({
  providedIn: 'root'
})
export class FaqService {

  getFaqId(id: any) {
    return this.getFaqList().then((obj) => obj.find(faqlist => faqlist.id === id));
  }

  getFaqList(){
    var def = $.Deferred();
      setTimeout(function(){
        var obj = [
          {id:'news', pageid:'11111'},
          {id:'details', pageid:'222222' },
          {id:'faqlist', pageid:'333333' }
        ]
      def.resolve(obj);
      }, 100)
    return def;
  }
}

感谢您的帮助。

致谢

Angular 6-加载前比较延迟列表中的路线数据

0 个答案: