如何在Angular2应用中实现React材料-UI组件

Question

那里几乎没有任何文档。实际上，我开始怀疑NG2，React可以一起玩。但是我不是专家，所以我需要您的帮助。

根据appbar的材料UI文档，这是将其添加到组件

的代码

import React from 'react';
import AppBar from 'material-ui/AppBar';
/**
 * A simple example of `AppBar` with an icon on the right.
 * By default, the left icon is a navigation-menu.
 */
const AppBarExampleIcon = () => (
  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
);
export default AppBarExampleIcon;

问题是，这是一个反应组件的文档，而不是Angular2组件。

这是我在Angular2组件中，那里有很少的信息：

  import { Component, OnInit } from '@angular/core';
  import { React } from 'react';
  import { AppBar } from 'material-ui';

  @Component({
      selector: 'app-toolbar',
      templateUrl: './toolbar.component.html',
      styleUrls: ['./toolbar.component.css']
  })
  export class ToolbarComponent implements OnInit {
      AppBarExampleIcon = `
          <AppBar title="Title" iconClassNameRight="muidocs-icon-navigation-expand-more" />
      `;
  constructor() { }
  ngOnInit() {
  }
}

这一无所获。

之前有人尝试过吗？

Answer 1

反应和角度无法像这样混合。尽管两者都使用组件语法，但罩下面是完全不同的。Material-UI是专门用于React的Material Design实现。

尝试Angular Material，是Angular2的Material Design实现。它没有像Material-UI那样完全充实(由于NG2是较新的(，但是您仍然应该能够进行一些修改 - https：//material.angular.io/components/components/components/component/component/toolbar