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()]