выделите раздел для ссылок на хеш-ссылки извне на приложение angular 5 - PullRequest
Новая
       7

выделите раздел для ссылок на хеш-ссылки извне на приложение angular 5

0 голосов
/ 02 ноября 2018

У меня есть заголовок с navbar со следующим кодом:

header.component.html 

<ul id="menuList">
    <li (click)="showHomePage(); hideMobileMenuList()" id="home"><a [class.active]="route == '/'">Home</a></li>
    <li (click)="scrollDownToSection('services'); hideMobileMenuList()">
       <a [class.active]="route == '/contact'">Services </a>
    </li>
    <li (click)="showHomePage(); hideMobileMenuList()">
       <a id="step" [class.active]="route == '/contact'">Buy/Sell </a>
    </li>
    <li (click)="scrollDownToSection('how'); hideMobileMenuList()">
       <a id="how" [class.active]="route == '/contact'">How it works </a>
    </li>
    <li (click)="comingSoonToaster(); hideMobileMenuList()">
       <a [class.active]="route == '/contact'">Blogs & news</a>
    </li>
    <li (click)="hideMobileMenuList()">
       <a href="/faq" target="_blank">Faq's</a>
    </li>
</ul>

header.component.ts 

showHomePage() {
    this.router.navigate(['/']);
    this.scrollToTop();
}

scrollDownToSection(type) {
    this.router.navigate(['/']).then(() => {
      // do whatever you need after navigation succeeds
      if (type == "services") {
        $('html, body').animate({ scrollTop: 650 }, 1000);
        return false;
      }
      else if (type == "buy") {
        $('html, body').animate({ scrollTop: 1150 }, 1000);
        return false;
      }
      else if (type == "how") {
        $('html, body').animate({ scrollTop: 1150 }, 1000);
        return false;
      }
    });

 }

приведенный выше код работает, когда я нажимаю на ссылки в заголовке и страница прокручивается до соответствующего раздела. но когда я пытаюсь зайти на мою страницу с внешней ссылки, например, www.abc.com # services, она не прокручивается до раздела services. Чтобы это работало, я добавил id = "services" в div в моем html на домашней странице, но это не сработало, страница перенаправляется в root.

После нескольких поисков в Google я добавил RouterModule.forRoot(appRoutes, {useHash: true}) в мою конфигурацию маршрута, надеясь, что она будет работать, но теперь, если я нажму на ссылку с URL-адресами www.abc.com # services с другого сайта, страница будет перенаправлена ​​на www.abc.com/ # и страница не прокручивается до соответствующего раздела.

вот мой файл app.routing.ts: 

const appRoutes: Routes = [

    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'home',
        component: HomeComponent
    },
    {
      path:"verify/:token",
      component:VerificationComponent
    },
    {
      path:"block/:email/:token",
      component:AccountBlockComponent
    },
    {
        path:"forgotPassword",
        component:ForgotPasswordComponent
    },
    {
        path:"resetPassword/:authToken",
        component:ResetPasswordComponent
    },
    {
        path:"expiredResetPassword",
        component:expiredResetPasswordLinkComponent
    },
    {
        path:"updatedPassword",
        component:ResetPasswordVerifiedComponent
    },
    {
        path:"aboutUs",
        component:AboutUsComponent
    },
    {
        path:"twoFactorAuthentication",
        component:TwoFactorAuthenticationComponent,
        canActivate: [AuthGaurdService],
        data: { module: "twoFactorAuthenticationData" }
    },
    {
        path:"qrCode",
        component:qrCodeComponent,
        canActivate: [AuthGaurdService],
        data: { module: "qrCodeData" }
    },
    {
        path:"emailOTP",
        component:EmailOTPComponent,
        canActivate: [AuthGaurdService],
        data: { module: "emailOTPData" }
    },
     {
        path: '**',
        redirectTo: '',
        pathMatch: 'full'
    },
];

export const routing = RouterModule.forRoot(appRoutes, {useHash: true});

Как сделать так, чтобы страница переходила к соответствующему разделу на домашней странице при переходе с внешних ссылок?

Альтернативный метод для текущей реализации приветствуется.

...