Угловой 2+ расширяют компонент двумя другими компонентами - PullRequest
Новая
       24

Угловой 2+ расширяют компонент двумя другими компонентами

0 голосов
/ 10 февраля 2019

Допустим, у нас есть приложение с большим количеством списков и, следовательно, некоторыми базовыми компонентами 

export class SimpleListComponent { ... }

export class ExtendedListComponent extends SimpleListComponent { ... }

..., которые мы можем легко расширить.Они несут все основные функции для наших списков (например, переключение страниц, результаты подсчета, ...).Мы используем эти два основных компонента для двух разных списков героев: 

export class HeroSimpleListComponent extends SimpleListComponent { ... }

export class HeroExtendedListComponent extends ExtendedListComponent { ... }

К сожалению, нам все равно придется дублировать большую часть нашего кода, потому что HeroSlimListComponent и HeroExtendedListComponent имеют много общих функций (например,загрузить героев, путь к герою, ...).

Моя первая попытка состояла в том, чтобы пройти класс, который нам нужно расширить 

export class ExtendedListComponent<T = SimpleListComponent> extends T { ... }

, но это не работает.Кроме того, я обнаружил этот пост , в котором говорится, что множественное наследование в машинописи невозможно.Тем не менее, у меня такое ощущение, что мне не хватает какого-то базового решения, связанного с угловым компонентом.

Заранее спасибо за вашу помощь!

1 Ответ

0 голосов
/ 10 февраля 2019

Вы правы, множественное наследование недоступно (к сожалению, потому что это было бы очень круто).

Возможность 1 Кажется, что ваши общие действия могут жить внутрипростой компонент списка, и вы можете предоставить свойства, необходимые в расширяющих компонентах (например, путях) в конструкторе.Когда вы вызываете super (), параметры конфигурации могут быть переданы вниз. 

export class SimpleListComponent {
    constructor(
        routePath: string,
    ) {}
}

// extending component
export class HeroSlimListComponent extends SimpleListComponent {
    constructor() {
        super('<my-route-path>');
    }
}

Возможность 2 Возможно, стоит проверить mixins !Я не играл с ними, так что, может быть, кто-то с некоторым опытом может взвесить?Не похоже, что они полностью решат проблему, поскольку вам все еще нужно реализовать интерфейс, но это может быть хорошим общим набором функций для родительских компонентов.

Возможность 3 (возможно, мой личный фаворит) Сохраняйте общий список и компоненты расширенного списка как компоненты, которые принимают входные данные и дают выходные данные, а не расширяют их.Вместо этого используйте их в HTML.Например, могут быть переданы навигационные пути, а службы данных могут быть предоставлены на родительском компоненте уровня и внедрены в дочерние компоненты в дереве.Чтобы настроить элементы списка, вы можете передать ссылки на шаблоны (см. Примеры таблиц материалов ).Это лишь грубый пример, и его нужно было бы оптимизировать, но вот вам: 

// simple list component
// selector = simple-list
constructor(simpleListService: SimpleListService) {}

// hero simple list component
@Component({
    ....
    providers: [
        { provide: SimpleListService, useClass: HeroSimpleListService },
    ],
})

// html
<simple-list [navPath]='heroNavPath' <...other templates / props>>

Следует иметь в виду, что каждый фрагмент кода из класса, который вы расширяете, снова добавляется в вашу окончательную сборку как дубликаткод в каждом расширяющем компоненте (ознакомьтесь с результатами сборки prod, это довольно интересно).

...