तो, मैं एक ऐप विकसित करने के लिए कोणीय 4 का उपयोग कर रहा हूं, और मुझे एक समस्या है। मैं एक पृष्ठ में दो घटकों को शामिल करने के लिए कोणीय 4 रूटिंग का उपयोग करना चाहता हूं, लेकिन यह उस तरह से करने योग्य नहीं लगता जिस तरह से मैं इसे करना चाहता हूं। मेरे पास एक घटक हेडर है जो सिर्फ एक नेवबार है, और मेरे पास एक अन्य घटक होम है, जिसमें पहले से ही एक नेवबार है इसलिए मैं हेडर< शामिल नहीं करना चाहता /strong> होम के साथ, लेकिन किसी अन्य घटक के साथ लॉगिन उदाहरण के लिए। इसलिए मैंने कोणीय दस्तावेज़ों को देखने की कोशिश की और ऐसा करने का सबसे नज़दीकी तरीका बच्चों के साथ होगा, लेकिन मैं नहीं चाहता कि लॉगिन हेडर का बच्चा हो। मैंने अपनी app.module.ts फ़ाइल में राउटर-आउटलेट और दो घटकों को डालने का प्रयास किया, लेकिन यह कारगर नहीं हुआ।

0
Jojo01 7 मई 2017, 00:07

2 जवाब

सबसे बढ़िया उत्तर

आपका मुख्य घटक डिफ़ॉल्ट राउटर आउटलेट में प्रदर्शित किया जा सकता है और दूसरा घटक इस तरह एक माध्यमिक, नामित राउटर आउटलेट में प्रदर्शित किया जा सकता है:

<div class="container">
    <div class="row">
        <div class="col-md-10">
            <router-outlet></router-outlet>
        </div>
        <div class="col-md-2">
            <router-outlet name="popup"></router-outlet>
        </div>
    </div>
</div>

फिर आप इस तरह से द्वितीयक मार्ग पर जा सकते हैं:

this.router.navigate([{outlets: { popup: ['messages']}}]);

आप यहां एक पूरा उदाहरण देख सकते हैं: https://github.com/DeborahK/Angular-Routing

1
DeborahK 7 मई 2017, 21:36

प्रत्येक घटक के लिए जिसके लिए URL पथ, उर्फ ​​मार्ग की आवश्यकता होती है, बस इस तरह की एक फ़ाइल जोड़ें (login/login.route.ts):

import {
    Routes,
    RouterModule
} from "@angular/router";

import {
    LoginComponent
} from "./login-component";

const loginRoutes:Routes = [
    {
        path: "login",
        component: LoginComponent,
        pathMatch: "full"
    }
];

export const loginRouting = RouterModule.forRoot(loginRoutes);

इसे अपने app.component.ts में भी जोड़ना न भूलें!

import { NgModule } from "@angular/core";
import { HttpModule } from "@angular/http";
import { App }   from "./app";
...    

import { LoginRouter} from "./login/login.route";

@NgModule({
    imports: [
      ...
      LoginRouter,
      ...
    ],
    declarations: [
      App,
      LoginComponent
      ...
    ],
    providers: [
      LoginService
      ...
    ],
    bootstrap: [
      App
      ...
    ],
})
export class AppModule {}
-2
Alicia 7 मई 2017, 00:16