Hay muy poca o ninguna documentación de esto por ahí. De hecho, estoy empezando a dudar de que ng2 y React puedan jugar juntos. Pero no soy un experto, así que necesito tu ayuda.
De acuerdo con los documentos de Material UI para AppBar aquí Este es el código para agregarlo a su componente
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;El problema es que esta es documentación para un componente React, no un componente Angular2.
Esto es todo lo que llegué en mi componente Angular2 con la poca información que existe:
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() { } }Esto resulta en nada.
¿Alguien ha intentado esto antes?
React y Angular no se pueden mezclar así. Aunque ambos usan la sintaxis de componentes, lo que hay debajo del capó es completamente diferente. Material-UI es una implementación de Material Design específicamente para React .
Pruebe Angular Material en su lugar, una implementación de Material Design para Angular2. No está tan completo como Material-UI (debido a que ng2 es más nuevo), pero aún hay algunos componentes que debería poder usar con un poco de modificación: https://material.angular.io/components/component/toolbar