اتصال اطلاعات Router به ورودی های کامپوننت در Angular

در Angular نسخه ۱۶ یک ویژگی قدرتمند جدید معرفی شده است که اتصال خودکار اطلاعات روتر، مانند query parameter ها ، path parameter ها ، static data و resolver data را به ورودی های یک کامپوننت مسیریابی شده امکان پذیر می کند.

این عملکرد را می توان با استفاده از تابعwithComponentInputBinding فعال کرد. در اینجا مثالی از نحوه استفاده از آن آورده شده است:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withComponentInputBinding } from '@angular/router';

bootstrapApplication(AppComponent, {
 providers: [
 provideRouter(
      [
        {
          path: '',
          pathMatch: 'full',
          loadComponent: () => import('./app/home/home.component'),
        },
        {
          path: 'todo',
          loadComponent: () => import('./app/todo/todo.component'),
        },
      ],
         // ???
         withComponentInputBinding()
    ),
  ],
});

با استفاده از این ویژگی، روترoutletکامپوننت به کوئری پارامترها ، path parameter ها و data observable های مسیر فعال گوش می دهد و به طور خودکار متدsetInputرا با مقدار اولیه و مقداری که تغییر می کند فراخوانی می کند.

به عنوان مثال، فرض کنید ما یک کوئری پارامترidدر URL خود داریم و می خواهیم آن را واکشی کنیم. در این صورت URL ما todo?id=1/خواهد بود و کامپوننت ما به شکل زیر خواهد بود:

@Component({
  ...
  standalone: true,
})
export default class TodoComponent {
 private todosService = inject(TodosService);

  todo$: Observable<Todo>;

 // The input name should be the same as the query param key
 @Input() set id(value: string) {
 this.todo$ = this.todosService.get(value);
  }
}

به طور مشابه، اگر یک عبارت جستجو در URL خود داشته باشیم به عنوان مثال foo?searchTerm=bar/، می توانیم کنترل فرم خود را با مقدار آن به روز کنیم:

@Component({
  ...
 standalone: true,
 imports: [ReactiveFormsModule],
})
export default class FooComponent {
   searchControl: FormControl<string>;

   @Input() searchTerm: string;

 ngOnInit() {
   this.searchControl = new FormControl(this.searchTerm || '');
  }
}

در موارد تداخل، اولویت بر اساس موارد زیر تنظیم می شود: داده ها > path parameters ها > query parameters ها.

در اینجا یک مثال است که تمام موارد استفاده معتبر را نشان می دهد:

bootstrapApplication(AppComponent, {
  providers: [
 provideRouter(
      [
        {
          path: 'todos/:todoId',
          data: {
            isSomething: true,
          },
          resolve: { resolveFoo: () => 'My resolved data' },
          loadComponent: () => import('./app/todo/todo.component'),
        },
      ],
      withComponentInputBinding()
    ),
  ],
});

فرض کنید URL ما todos/1?searchTerm=angular/است و کامپوننت ما به شکل زیر است:

@Component({
  ...
 standalone: true,
})
export default class TodoComponent {
  @Input() resolveFoo: string; // My resolved data
  @Input() isSomething: boolean; // true
  @Input() todoId: string; // 1
  @Input() searchTerm: string; // angular
}

به طور کلی، این ویژگی جدید فرآیند ارسال اطلاعات روتر به کامپوننت مسیریابی شده را ساده می کند و نیاز به کدهای تکراری را کاهش می دهد.

این مقاله برگردان شده یک مقاله معتبر درباره این موضوع است.برای دسترسی به مقاله منبع اینجا کلیک کنید.

برای مشاهده پست های بیشتر و ارتباط با من از طریق لینکدین اینجا کلیک کنید.

امیدوارم براتون مفید واقع شده باشه.