not - كيفية تبديل التخطيطات في Angular2




angular routing (3)

أوصي بشدة بقراءة البرنامج التعليمي بواسطة الفريق الزاوي على التوجيه here .

هناك بعض الإعدادات التي ستحتاج إلى تنفيذها ، ولكن بعض الخطوات الأساسية هي:

  • قم بإنشاء ملف app.routes.js حيث يمكنك تحديد اسم المسار والمكون الذي يجب تحميله عند الوصول إلى هذا المسار.

    import { provideRouter, RouterConfig }  from '@angular/router';
    import { LoginComponent } from 'components/login.component'
    
    const routes: RouterConfig = [
      {
        path: '/login', //name of the route
        component: LoginComponent //component to load when route is hit
      }
    ];
    
    export const appRouterProviders = [
      provideRouter(routes)
    ];
    
  • في المكون الرئيسي الذي ستقوم فيه بالنقر فوق ارتباط (مثل شريط التنقل) ، ستحتاج إلى إضافة [routerLink] = 'myRouteName' (مثل '/ login') وزوج من علامات منفذ التوجيه التي يوجد فيها الجديد سيتم إدراج المكون (الملقب عرض).

    import { Component } from '@angular/core';
    import { ROUTER_DIRECTIVES } from '@angular/router';
    
    @Component({
      selector: 'nav-bar',
      template: `
        <h1>{{title}}</h1>
        <a [routerLink]="['/login']">Login</a>
        <router-outlet></router-outlet>
       `,
      directives: [ROUTER_DIRECTIVES]
    })
    export class AppComponent {
    
    }
    

امل ان يساعد. لقد تعلمت الزاوية 2 خلال الشهر الماضي ، وكانت الوثائق المتعلقة بـ angular.io لا تقدر بثمن. واضح بالفعل ، تفسيرات خطوة بخطوة على الكثير من الجوانب ، ومحطة أولى جيدة عند الدخول في موضوع جديد.

ما هي أفضل الممارسات في استخدام تخطيطين مختلفين تمامًا في نفس تطبيق Angular2؟ على سبيل المثال ، في مسار / تسجيل الدخول ، أريد أن أمتلك صندوقًا بسيطًا جدًا أفقيًا وعموديًا ، ولكل مسار آخر ، أريد قالبًا كاملاً برأس ومحتوى وتذييل الصفحة.


في Angular 4 (وربما أيضًا في Angular 2) يمكنك القيام بما يلي:

const routes: Route[] = [
  {path: 'admin', redirectTo: 'admin/dashboard', pathMatch: 'full'},
  {
    path: 'admin',
    children: [
      {
        path: '', component: DefaultLayoutComponent,
        children: [
          {path: 'dashboard', component: DashboardComponent}
        ]
      },
      {
        path: '',
        children: [
          {path: 'login', component: LoginComponent}
        ]
      }
    ]
  }
]

باستخدام path: '' لن تضطر إلى اختراع مساحات عناوين url مختلفة من أجل استخدام تخطيط بسيط. هذا ما تبدو عليه الآراء:

index.html و:

<router-outlet>

الافتراضية layout.html:

<div class="sidebar"></div>
<div class="content">
  <router-outlet></router-outlet>
</div>

هناك طريقة بسيطة أخرى هي تحديد طرق الأطفال:

const appRoutes: Routes = [
  {
    path: 'fullLayout',
    component: FullLayoutComponent,
    children: [
      { path: 'view', component: HomeComponent },
    ]
  }, {
    path: 'simpleLayout',
    component: SimpleLayoutComponent,
    children: [
      { path: 'view', component: HomeComponent },
    ]
  }
];

/ fullLayout / view - يظهر بنية تخطيط كاملة

/ simpleLayout / view - يعرض بنية تخطيط بسيطة

app.component.html

<router-outlet></router-outlet>

كامل layout.component.html

<h1>Full layout</h1>
<router-outlet></router-outlet>
<h1>FOOTER</h1>

بسيطة، layout.component.html

<h1>Simple layout</h1>
<router-outlet></router-outlet>




angular2-routing