Question

我需要在我的角度2应用程序中将路由器和位置导入我的app.component，以便我可以在我的构造函数中使用它们。

我使用最新的angular 2 lib作为路线。

这是我当前的app.component。我需要知道从哪里导入位置和路由器以及如何使用它们，例如我需要一个provider /指令才能在我的构造函数中使用它们。

这是我的app.component：

import { Component } from '@angular/core';
import { Routes, Location, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { HTTP_PROVIDERS, HTTP_BINDINGS} from '@angular/http';
import { NgIf } from '@angular/common';

import {Home} from './components/home/home';
import {Messages} from './components/messages/messages';
import {NewJobs} from './components/newJobs/newJobs';
import {NewJob} from './components/newJob/newJob';
import {Blog} from './components/blog/blog';
import {BlogArticle} from './components/blog/blogArticle';
import {CreateJob} from './components/createJob/createJob';
import {SearchJobs} from './components/searchJobs/searchJobs';
import {Login} from './components/login/login';
import {Applications} from './components/applications/applications';
import {Register} from './components/register/register';
import {ForgotPassword} from './components/forgotpassword/forgotpassword';
import {ChangePassword} from './components/changepassword/changepassword';
import {ChangeEmail} from './components/changeemail/changeemail';
import {SocialRegister} from './components/socialregister/socialregister';
import {Admin} from './components/admin/admin';
import {Contact} from './components/contact/contact';
import {SearchUsers} from './components/searchusers/searchusers';
import {Jobs} from './components/job/jobs';
import {CompanyProfile} from './components/company/company';
import {Dashboard} from './components/dashboard/dashboard';
import {Profile} from './components/profile/profile';
import {UserApplications} from './components/userApplications/userApplications';
import {Messenger} from './components/messenger/messenger';
import {Help} from './components/help/help';
import {Achievements} from './components/achievements/achievements';
import {Sitemap} from './components/sitemap/sitemap';

import {HeaderNavigation} from './components/header/header';
import {HeaderNavigationLoggedIn} from './components/header/headerNavigationLoggedIn';
import {HeaderNavigationLoggedInCompany} from './components/header/headerNavigationLoggedInCompany';
import {Footer} from './components/footer/footer';
import {SideMenuCompany} from './components/header/sideMenuCompany';
import {SideMenuUser} from './components/header/sideMenuUser';
import {Splash} from './components/splash/splash';

import {Environment} from './models/environment/environment';
import {UserProfile} from './models/profile/profile';
import {Organisation} from './models/organisation/organisation';
import {User} from './models/user/user';

import {AuthService} from './services/authService/authService';
import {SocialService} from './services/socialService/socialService';
import {UserService} from './services/userService/userService';
import {OrganisationService} from './services/organisationService/organisationService';
import {NotificationService} from './services/notificationService/notificationService';
import {ApplicationService} from './services/applicationService/applicationService';
import {JobService} from './services/jobService/jobService';
import {MessageService} from './services/messageService/messageService';
import {EmailService} from './services/emailService/emailService';

@Component({
  moduleId: module.id,
  selector: 'app',
  providers: [ROUTER_PROVIDERS, HTTP_PROVIDERS, UserService, UserProfile, OrganisationService, Organisation, Environment, HTTP_BINDINGS],
  template: `
    <HeaderNavigation></HeaderNavigation>

    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES, HeaderNavigation]
})
@Routes([
  { path: '/', component: Home, as: 'Home'},
  { path: '/home', component: Home, as: 'Home', useAsDefault: true},
  { path: '/login', component: Login, as: 'Login' },  
  { path: '/register/', component: Register, as: 'Register' },
  { path: '/register/:id', component: Register, as: 'Register' },
  { path: '/forgotpassword', component: ForgotPassword, as: 'ForgotPassword' },
  { path: '/dashboard', component: Dashboard, as: 'Dashboard' },
  { path: '/search', component: SearchJobs, as: 'Search' }, 
  { path: '/search/:id', component: SearchJobs, as: 'SearchJob' },  
  { path: '/profile', component: Profile, as: 'Profile' },
  { path: '/settings', component: CompanyProfile, as: 'Settings' },
  { path: '/jobs', component: Jobs, as: 'Jobs' },
  { path: '/password', component: ChangePassword, as: 'Password' },
  { path: '/email', component: ChangeEmail, as: 'Email' },
  { path: '/applications/:id', component: Applications, as: 'Applications' },
  { path: '/applications', component: Applications, as: 'Applications' },
  { path: '/socialRegister/:id', component: SocialRegister, as: 'SocialRegister' },
  { path: '/socialRegister', component: SocialRegister, as: 'SocialRegister' },
  { path: '/applys', component: UserApplications, as: 'Applys' },
  { path: '/contact', component: Contact, as: 'Contact' },
  { path: '/searchTeachers', component: SearchUsers, as: 'SearchUsers' },
  { path: '/createJob', component: CreateJob, as: 'CreateJob' },
  { path: '/pizzacat123', component: Admin, as: 'Pizzacat123' },  
  { path: '/messenger', component: Messenger, as: 'Messenger' },
  { path: '/messenger/:id', component: Messenger, as: 'Messenger' },
  { path: '/messenger/:id/:type/:roomId', component: Messenger, as: 'Messenger' },
  { path: '/help', component: Help, as: 'Help' }, 
  { path: '/achievements', component: Achievements, as: 'Achievements' }, 
  { path: '/blog', component: Blog, as: 'Blog' }, 
  { path: '/blog/:slug', component: BlogArticle, as: 'BlogArticle' }, 
  { path: '/sitemap', component: Sitemap, as: 'Sitemap' },
  { path: '/newJobs', component: NewJobs, as: 'NewJobs' },
  { path: '/newJob/:slug', component: NewJob, as: 'NewJob' }, 
  { path: '/messages', component: Messages, as: 'Messages' }, 

  { path:'/**', redirectTo: ['Login']}
])
export class AppComponent { 
  authService: AuthService;
  userService: UserService
  isLoggedIn: boolean = false;
  isCompanyLogin: boolean = false;
  isUserLogin: boolean = false;
  userProfile: UserProfile; 

  constructor(_authService: AuthService, _userService: UserService, _userProfile: UserProfile){ 
    this.authService = _authService;
    this.userService = _userService;
    this.userProfile = _userProfile; 
  }
}

Answer 1

您应该从＆＃39; @ angular / router＆＃39;：

导入路由器

import { Router } from '@angular/router';

要使用它，您需要设置：

constructor(private router: Router) { }

从＆＃39; @ angular / common＆＃39;：

导入位置

import {Location} from '@angular/common';

constructor(location: Location) {
  location.go('/foo');
}

我需要在我的角度2应用程序中将路由器和位置导入我的app.component，以便我可以在我的构造函数中使用它们

1 个答案: