tutorial - angular material




কৌণিক 2 ব্যতিক্রম: এটি 'রাউটারলিঙ্ক'-এ আবদ্ধ হতে পারে না কারণ এটি কোনও পরিচিত দেশীয় সম্পত্তি নয় (8)

আপনি আপনার মডিউল আছে

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

আপনাকে মডিউল রুটমোডুল রফতানি করতে হবে

উদাহরণ:

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

যারা এই মডিউলটি আমদানি করে তাদের সকলের কার্যকারিতা অ্যাক্সেস করতে সক্ষম হতে।

স্পষ্টতই Angular2 এর জন্য বিটা নতুনের চেয়ে নতুন, সুতরাং খুব বেশি তথ্য নেই, তবে আমি যা চেষ্টা করি তা করার চেষ্টা করছি কিছুটা বেসিক রাউটিং।

Https://angular.io ওয়েবসাইট থেকে দ্রুত-প্রারম্ভিক কোড এবং অন্যান্য স্নিপেটগুলি নিয়ে হ্যাকিংয়ের ফলে নিম্নলিখিত ফাইলের কাঠামো তৈরি হয়েছে:

angular-testapp/
    app/
        app.component.ts
        boot.ts
        routing-test.component.ts
    index.html

ফাইলগুলি নিম্নরূপে পপুলেশনের সাথে:

index.html

<html>

  <head>
    <base href="/">
    <title>Angular 2 QuickStart</title>
    <link href="../css/bootstrap.css" rel="stylesheet">

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';

import {AppComponent} from './app.component'

bootstrap(AppComponent, [
    ROUTER_PROVIDERS
]);

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {RoutingTestComponent} from './routing-test.component';

@Component({
    selector: 'my-app',
    template: `
        <h1>Component Router</h1>
        <a [routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

@RouteConfig([
    {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])

export class AppComponent { }

রাউটিং-test.component.ts

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    template: `
        <h2>Routing Test</h2>
        <p>Interesting stuff goes here!</p>
        `
})
export class RoutingTestComponent { }

এই কোডটি চালানোর চেষ্টা ত্রুটি তৈরি করে:

EXCEPTION: Template parse errors:
Can't bind to 'routerLink' since it isn't a known native property ("
        <h1>Component Router</h1>
        <a [ERROR ->][routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        "): [email protected]:11

আমি এখানে একটি অস্পষ্ট সম্পর্কিত সমস্যা খুঁজে পেয়েছি; রাউটার-লিঙ্কের নির্দেশগুলি অ্যাঙ্গুলার ২.০.০-বিটা.0 এ আপগ্রেড করার পরে ভেঙে গেছে । যাইহোক, উত্তরের একটিতে "কার্যকারী উদাহরণ" প্রাক-বিটা কোডের উপর ভিত্তি করে - যা এখনও ভালভাবে চলতে পারে তবে আমি তৈরির কোডটি কেন কাজ করছে না তা জানতে চাই।

যে কোনও পয়েন্টার কৃতজ্ঞভাবে গ্রহণ করা হবে!


আপনি যদি ভাগ করা মডিউল ব্যবহার করেন, কেবলমাত্র আপনার উপাদানটি ঘোষিত মডিউলটিতে রাউটারমডুল যুক্ত করুন এবং <router-outlet></router-outlet> যুক্ত করতে ভুলবেন না

এখান থেকে রেফারেন্স করা রাউটারলিঙ্ক কাজ করে না


আমার সমাধান সহজ। আমি [রাউটারলিঙ্ক] এর পরিবর্তে [href] ব্যবহার করছি। আমি [রাউটারলিঙ্ক] এর জন্য সমস্ত সমাধান চেষ্টা করেছি। তাদের কেউই আমার ক্ষেত্রে কাজ করে না।

এখানে আমার সমাধান:

<a [href]="getPlanUrl()" target="_blank">My Plan Name</a>

তারপরে টিএস ফাইলে getPlanUrl ফাংশনটি লিখুন।


ইউনিট পরীক্ষার সময় যদি এই ত্রুটিটি পেয়ে থাকে তবে দয়া করে এটি লিখুন।

import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
  TestBed.configureTestingModule({
   imports: [RouterTestingModule],
   declarations: [AppComponent],
 });
}));

কেবলমাত্র একটি পরীক্ষার ফাইলটিতে যখন এই সমস্যাটি হয় তখন আমি @ রাইক্রোয়ের উত্তরটির সত্যই প্রশংসা করি! সেখানেই আমি এর মুখোমুখি হয়েছিলাম।

যেহেতু ব্যাকআপ হিসাবে কিছু করার অন্য উপায় থাকা প্রায়শই সহায়ক,

import { MockComponent } from 'ng2-mock-component';
. . .
TestBed.configureTestingModule({
  declarations: [
    MockComponent({
      selector: 'a',
      inputs: [ 'routerLink', 'routerLinkActiveOptions' ]
    }),
    . . .
  ]

(সাধারণত, কোনও <a> উপাদানটিতে routerLink ব্যবহার করা হবে তবে অন্য উপাদানগুলির জন্য সে অনুযায়ী নির্বাচককে সামঞ্জস্য করুন))

দ্বিতীয় কারণটির জন্য আমি এই বিকল্প সমাধানটি উল্লেখ করতে চেয়েছিলাম তা হ'ল, যদিও এটি বেশ কয়েকটি স্পেক ফাইলগুলিতে আমাকে ভালভাবে পরিবেশন করেছে, তবে আমি একটি ক্ষেত্রে এটি নিয়ে একটি সমস্যায় পড়েছি:

Error: Template parse errors:
    More than one component matched on this element.
    Make sure that only one component's selector can match a given element.
    Conflicting components: ButtonComponent,Mock

আমি কীভাবে এই উপহাস এবং আমার ButtonComponent একই নির্বাচকটি ব্যবহার ButtonComponent তা আমি বেশ বুঝতে পারি না, সুতরাং বিকল্প পদ্ধতির সন্ধানের ফলে আমাকে এখানে @ রায়ক্রোর সমাধানের দিকে নিয়ে গেল।


যে সমস্ত লোকেরা npm test চালানোর চেষ্টা করার সময় এটি খুঁজে পান কারণ npm test বা ng test মাধ্যমে কর্ম বা অন্য কিছু ব্যবহার করে। আপনার .spec মডিউলটি তৈরি করতে সক্ষম হতে একটি বিশেষ রাউটার পরীক্ষার আমদানি প্রয়োজন।

import { RouterTestingModule } from '@angular/router/testing';

  TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent],
  });

http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/


> = RC.5

RouterModule আমদানি করুন https://angular.io/guide/router এছাড়াও দেখুন

@NgModule({ 
  imports: [RouterModule],
  ...
})

> = RC.2

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
  ...
];

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

<= RC.1

আপনার কোড অনুপস্থিত

  @Component({
    ...
    directives: [ROUTER_DIRECTIVES],
    ...)}

আপনি routerLink বা router-outlet মতো নির্দেশকে আপনার উপাদানগুলির পরিচিত না করে ব্যবহার করতে পারবেন না।

নির্দেশিক নামগুলি অ্যাঙ্গুলার 2 এ কেস-সংবেদনশীল হিসাবে পরিবর্তিত করা হয়েছে, তবুও উপাদানগুলি <<ter <router-outlet> মতো ওয়েব-উপাদানগুলির সাথে সামঞ্জস্যপূর্ণ হতে ব্যবহার করে যা কাস্টম উপাদানগুলির নামে প্রয়োজন require

বিশ্বব্যাপী নিবন্ধন করুন

ROUTER_DIRECTIVES বিশ্বব্যাপী উপলভ্য করতে, এই সরবরাহকারীকে bootstrap(...) :

provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})

তারপরে আর আর প্রতিটি উপাদানগুলিতে ROUTER_DIRECTIVES করার দরকার নেই।


>> ভি 5 এর জন্য

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

const appRoutes: Routes = [
  {path:'routing-test', component: RoutingTestComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
  ]
})

উপাদান:

@Component({
    selector: 'my-app',
    template: `
        <h1>Component Router</h1>
        <a routerLink="/routing-test" routerLinkActive="active">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

<ভি 5 এর জন্য

এছাড়াও RouterLink directives হিসাবে ব্যবহার করতে পারে। directives: [RouterLink] । যে আমার জন্য কাজ করে

import {Router, RouteParams, RouterLink} from 'angular2/router';

@Component({
    selector: 'my-app',
    directives: [RouterLink],
    template: `
        <h1>Component Router</h1>
        <a [routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

@RouteConfig([
    {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])





angular