Angular Материал с Angular 4

Существуют ли какие-либо опции для использования Angular Материал с новым Angular 4?

Официальный material.angularjs.org говорит:

Angular Материал, недавно выпущенный в версии 1, который мы считаем стабильным и готовым к использованию. Разработчики должны учитывать, что Angular Материал v1 работает только с Angular 1.x.

И что касается Angular 2:

Angular Разработка материала v2 также находится в хранилище angular/material2 GitHub

Как насчет Angular 4? Как вы думаете, мы можем связать как-то Angular 1.x и Angular 4 в одном проекте, чтобы принести Angular 4 новые функции и продолжать использовать потрясающую материальную структуру Angular?

Ответ 1

Вы можете обратиться к руководству Начало работы из здесь. Эта документация обновлена для поддержки angular v4.0.0

Некоторые материальные компоненты зависят от модуля angular анимации, чтобы иметь возможность выполнять более сложные переходы. Если вы хотите, чтобы эти анимации работали в вашем приложении, вам необходимо установить модуль @angular/animations и включить BrowserAnimationsModule в ваше приложение из @angular/platform-browser/animations.

Ответ 2

В декабре 2016 года, когда команда Angular бегала, рассказывая всем, чтобы прекратить говорить "Angular 2" и просто сказать "Angular", я вроде бы думал, что это глупый маркетинговый материал.

При чтении вопросов на этом сайте, однако, я начинаю видеть рациональное для их мольбы. Angular 1.x до Angular 2 представляет собой полную переписывание, полностью переработанную структуру, которая сломала почти все. Добавление к этому - это переход на semver, что означает, что новые номера основных версий будут быстрее.

Короче говоря, я думаю, что они пытались уклониться от мысли, что "Angular 4 - это Angular 2, поскольку Angular 2 был Angular 1", что определенно неверно,

Эта проблема восприятия также привела их к кодовому имени 4.0 "невидимый makeover".

Итак, когда вы видите пакеты, предназначенные для Angular2, большинство из них, вероятно, будут работать также с Angular 4. И если есть изменения ng4, которые нарушают эти пакеты, вы либо быстро увидите релизы для решения этих проблем... или у вас будет ваш ответ о том, достаточно ли поддерживается этот пакет для использования в вашем проекте.

Ответ 3

Я также работаю с Angular 4.0.0 и CLI 1.0.0, он отлично работает. Просто сказать, что странное поведение, такое как неэтилированный флажок, упомянутый выше, происходит потому, что ваши компоненты являются обязательными. Вы можете работать с предварительно созданными темами Angular или создавать свои собственные. Просто добавьте таблицу стилей в свой index.html, и вы увидите волшебство.

Дополнительная информация о тематическом тематике Angular можно найти здесь: https://material.angular.io/guide/theming

Ответ 4

Вы можете скачать или fork angular-quickstart шаблон из здесь В этом проекте есть последняя стабильная поддержка angular материала 2.0.0-beta.6 и angular 4.0.0. Было довольно сложно найти правильные настройки для последних версий.

Ответ 5

Я только начал работать с angular 4.0.0 (используя angular cli 1.0.0) и попытался использовать его с материалом 2.0.0-beta2. Он работает нормально, за исключением некоторых ошибок в пользовательском интерфейсе:

Материал Checkbox выглядит ужасно, у него есть собственный флажок внутри него (Снимок экрана)

Я обновлю это сообщение, если встретит что-то нестабильное. Кажется, вы можете попробовать https://github.com/mseemann/angular2-mdl.

Ответ 6

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

Добавьте это в свой файл css:). У меня с тобой случилось то же самое. Просто нужно исправление этой проблемы.

Ответ 7

Сделайте это:

npm install --save @angular/animations

import {BrowserAnimationsModule} from '@angular/platform-browser';

 //in app.module.ts
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class YourAppModule { }

Снова импортируйте модуль материалов. Как

import: [MaterialModule.forRoot()]