Создайте компонент главной таблицы и динамически добавляйте дочерние столбцы в angular
Доброе утро всем !
Поэтому необходимо создать приложение, которое отображает множество таблиц, которые все выглядят одинаково (за исключением, конечно, их столбцов и объектов внутри).
У меня есть компонент главной таблицы, который можно резюмировать следующим образом:
<master-table>
<!-- here I define the master table style, pagination, etc etc
which is the same everywhere -->
</master-table>
В файле TS компонента главной таблицы у меня есть в основном параметры, которые актуальны для каждой страницы, на которой должна отображаться такая таблица, например, filterDate, clearSelection и т. д. И т. Д., Ничего особенного.
Дело в том, что я не хочу повторять этот код повсюду, потому что в нем нет необходимости, поэтому моя идея заключалась в том, чтобы создать несколько компонентов, которые расширили бы компонент основной таблицы.
Он отлично работает для значений машинописного текста, но я застрял с HTML.
В моей основной таблице HTML я хотел бы в какой-то момент использовать какой-то заполнитель примерно так:
<master-table>
<standard-for-all-table></standard-for-all-table>
<!-- insert here child columns -->
</master-table>
В компонентах, расширяющих мою основную таблицу, я тогда представлял себе что-то вроде:
<!-- child component -->
<master-table></master-table>
<child-column>column definition</child-column>
Это позволит мне определить только столбцы в HTML дочерних компонентов, и они будут автоматически добавлены в родительский HTML во время выполнения ...
Есть идеи как это сделать ?
Ура и спасибо!
Я думаю, вы хотите максимально абстрагировать код. Таким образом, одним из вариантов было бы создать больше различных компонентов child-column с желаемой логикой и добавить их к родительскому master-table в зависимости от ваших условий. И вы должны поместить свой тег ссылки на компонент child-column внутри html компонента master-table.
Если вам нужен только один <child-column> внутри одного <master-table>, а дочерний элемент динамически изменяет контент в зависимости от условия, вам необходимо создать общую службу (provider) между родительским и дочерним
Я в основном позволил сказать, что таблица, и эта таблица имеет TS и связанный с ней HTML, затем у меня есть дети, которые расширяют эту таблицу, например, клиенты, пользователи, дома и т. д. Все они будут использовать эту материнскую таблицу и просто добавлять их собственный столбец, поэтому мне не нужно повторно использовать логику фильтра, добавлять / удалять логику и т.д., что уже сделано в материнской системе. Итак, в конце у меня будет много дочерних столбцов в зависимости от отображаемых дочерних объектов (будь то клиенты, клиенты и т. д.)
У меня уже есть эти поставщики и разные дочерние элементы, теперь я хотел бы, чтобы ребенок использовал родительский HTML и заполнил его недостающими столбцами, что является последним шагом :) Я не хочу, чтобы все возможные столбцы в моем мастере table, поскольку я не думаю, что это лучший способ, я, конечно, мог бы сделать это и сделать несколько ngSwitch и решить проблему, но, честно говоря, мне не нравится такой подход ...
Хорошо, теперь я понял вашу проблему. Так что я напишу вам свой ответ. Короче говоря, моя идея состоит в том, чтобы создать общий компонент <child-column> и создать в его структуре html все возможные столбцы td, которые вы могли бы использовать, ввести в него данные на основе ваших потребностей с помощью углового выражения {{data.variable}} и скрыть столбцы, которые вы не делаете. нужно с *ngIf = "variable"
Хорошо, спасибо, я постараюсь пойти по этому пути!
Ответы 2
Это руководство взято с официальной угловой страницы Здесь
Вот живой образец этого
Не уверен, что эти ссылки могут помочь.
Но на самом деле я работал над проектом, в котором мы хотим динамически загружать дочерний компонент в сетку (родительский компонент).
А позже мы можем передать любой компонент с другим видом внутри Grid
.
Угадайте, что это довольно близко к вашей цели.
По сути, вам нужно создать свой основной компонент master-table и компонент общего списка chid-column и вставить его в структуру родительского шаблона html.
I've edit the final part hope in a better understanding way...
Затем вы можете структурировать свой дочерний компонент, чтобы он содержал все необходимые вам свойства, и благодаря *ngIf показывать только те свойства, которые вы возвращаете из методов вашего поставщика, то есть getClients(), getUsers(), getHouses(), также благодаря декоратору @Input вы можете вводить эти данные непосредственно из родительского ребенку и создайте множество компонентов, которые захотите, просто изменив данные.
Итак, у вашего родителя может быть что-то вроде
import { Component } from '@angular/core';
import { MY_DATA_FROMP_ROVIDER } from './mydata/provider';
@Component({
selector: 'master-table',
template: `
<ul>
<child-column *ngFor = "let item of items"
[item] = "item">
</app-hero-child>
</ul>
`
})
export class MasterTableComponent {
items:any
constructor(public data: MYDATAFROMPROVIDER) {
this.items = MYDATAFROMPROVIDER.myGetMethod();
}
И в твоем ребенке
import { Component, Input } from '@angular/core';
import { INTERFACE } from './mydata/interface';
@Component({
selector: 'child-column',
template: `
<div *ngIf = "item.id">{{item.id}}</div>
<div *ngIf = "item.name">{{item.name}}</div>
<div *ngIf = "item.address">{{item.address}}</div>
<div *ngIf = "item.phone">{{item.phone}}</div>
`
})
export class ChildColumnComponent {
@Input() item: INTERFACE;
}
Если хотите глубже: Взаимодействие компонентов
в основном вам нужен компонент
childвнутри более общего компонентаparent?