Angular Как загрузить новый компонент по щелчку строки таблицы

Question

Если у меня есть таблица, заполненная из моего API, загруженная в розетку маршрутизатора, как я могу загрузить другой компонент, чтобы заменить таблицу выбранными деталями строки? Например, если бы у меня был список оборудования в таблице, я бы хотел щелкнуть по одному из них, чтобы загрузить компонент, где у меня есть форма, в которой будут записываться подробности неисправности на этом элементе оборудования, которая будет отправлена ​​в функцию отказа. в API.

Как это может быть реализовано?

Все еще изучает все веревки в angular.

Спасибо

Answer 1

Есть несколько способов сделать то, что вы просили.

вы можете использовать Маршрутизация , создать разные маршруты, один для страницы списка и один для страницы сведений, и добавить routerLink="details page path" в строке данных.

Я предлагаю вам пройти курс обучения героев из angular по следующему URL , если у вас его нет.

Answer 2

Вы должны использовать Параметры маршрута .

{ path: 'hero/:id', redirectTo: '/superhero/:id' },

 <a [routerLink]="['/hero', hero.id]">
   <span class="badge">{{ hero.id }}</span>{{ hero.name }}
</a>

Полный пример вы можете найти ЗДЕСЬ .

Answer 3

Хорошо звучит как условный рендеринг, по клику получить данные из строки, по которой щелкнули, и установить showForm в true, а в showTable - false, затем в вашей проверке html сделать условный рендеринг