小编Kos*_*nis的帖子

如何在Angular-Material中设置文本颜色?

我想在一个句子中设置一个单词,使其具有md-primary颜色,另一个单词设置为具有强调颜色.我假设这样的事情:

<div>
    Hello <span class="md-primary">friend</span>. 
    How are <span class="md-accent">you</span>?
</div>
Run Code Online (Sandbox Code Playgroud)

但这些类仅适用于某些指定的组件.

这样做的方法是什么?

angularjs-material

39
推荐指数
3
解决办法
6万
查看次数

Angular2材质对话框css,对话框大小

Angular2材料团队最近发布了MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

我想改变angular2材质对话框的外观和感觉.例如,要更改弹出容器的固定大小并使其可滚动,请更改背景颜色,以此类推.最好的方法是什么?有没有我可以玩的CSS?

css angular-material angular-material2 angular

23
推荐指数
7
解决办法
7万
查看次数

Flexbox在IE11中没有填充高度

我有这个案子:

http://codepen.io/anon/pen/radoPd?editors=110

这是CSS代码:

.wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  overflow-y: scroll;
}
Run Code Online (Sandbox Code Playgroud)

出于某种原因,在IE11上,.sidebar和.main区域都不会填充包装器的整个高度.

这是浏览器之间的不一致.这是一个错误吗?我错过了什么吗?

css css3 flexbox internet-explorer-11

17
推荐指数
1
解决办法
2万
查看次数

material-ui改变抽屉的高度

我在我的项目中使用react和material-ui,我遇到了一个我不知道如何解决的简单问题.我想创建一个抽屉并设置它的高度,当它打开时,它不会打开应用程序栏.

Drawer组件中没有高度参数,我也尝试覆盖它的样式并在样式对象上设置高度,如下所示:

<Drawer style={{height:'90%'}} />
Run Code Online (Sandbox Code Playgroud)

但它没有用.

我能想到的唯一方法是编辑抽屉组件的代码,但当然我想避免这种情况.

关于如何定义高度的任何想法?

css reactjs material-ui

16
推荐指数
3
解决办法
1万
查看次数

json输入的意外结束

我试图在用户注册后显示警报.我已经尝试过调试并且明白它总是会出现错误功能(当用户注册成功并且用户已经存在时).

以下是我的代码.我无法理解为什么总是会出错.任何帮助都表示赞赏,因为我长期坚持这一点.提前致谢.

1)警报组件

import { AlertService } from './../../shared/services/alert.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.css']
})
export class AlertComponent  {

  private _alertService;
  private message: any;

  constructor(alertService: AlertService) {
    this._alertService = alertService;

  }

   ngOnInit() {
       this._alertService.getMessage().subscribe(message => { this.message = message; });
     }

}
Run Code Online (Sandbox Code Playgroud)

2.Alert模板

<div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 
       'alert-danger': message.type === 'error' }">{{message.text}}</div>
Run Code Online (Sandbox Code Playgroud)

3)注册模板

<div class="container">

    <h2>Register</h2>
    <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
        <div class="form-group" [ngClass]="{ …
Run Code Online (Sandbox Code Playgroud)

javascript angular

7
推荐指数
1
解决办法
1801
查看次数

如何在nginx或apache httpd中构建angular 4应用程序?

嗨,我正在尝试构建Angular 4应用程序,接下来的步骤如下 -

建立 ng build

在我的amazon ec2实例中,我运行的是apache.遵循的步骤 -

#!/bin/bash
yum install httpd -y
yum update -y
cp dist/* /var/www/html/
service httpd start
chkconfig httpd on
Run Code Online (Sandbox Code Playgroud)

一切正常,但我的应用程序auth0用于身份验证,我看到他们回调http://ip/callback

我的申请表 - 404未找到.

APP-问题

我尝试建立像ng build --base-href .,它没有工作! Please help me how to build this one, please note that when I use在我当地的服务`一切都很棒.但当我尝试部署到生产时,它给出了这个错误.我非常确定在构建应用程序时我正在做的事情.

我试过nginxdocker容器,它给出了同样的错误.我的docker文件看起来像这样.

FROM nginx COPY dist /usr/share/nginx/html

  1. docker build -t ng-auth0-web-dev.
  2. docker run -d -p 8080:80 ng-auth0-web-dev

上面的docker文件有什么问题吗?

https://github.com/auth0-samples/auth0-angular-samples/tree/master/01-Login - 示例应用代码

https://manage.auth0.com/#/logs - 日志中没有错误,这意味着auth0工作正常,但我的角色出现构建错误. …

nginx auth0 angular-cli angular

6
推荐指数
1
解决办法
2500
查看次数

按ESC键时检测$ mdDialog关闭

我有一个带输入字段的$ mdDialog.在关闭$ mdDialog之前,将保存输入字段的内容.因此,当用户按下"关闭"按钮时,将调用一个函数对数据执行某些操作并保存它们.但是,我无法在ESC上检测到$ mdDialog的关闭.是否可以在$ mdDialog控制器中使用ESC检测关闭事件?

这是示例代码. Codepen链接

angular.module('MyApp', ['ngMaterial'])

.controller('AppCtrl', function($scope, $mdDialog, $rootScope) {
  //$rootScope is used only of this demo
  $rootScope.draft = '  ';

  $scope.showDialog = function(ev) {
    var msgDialog = $mdDialog.show({
      controller: 'DemoDialogCtrl',
      template: "<md-input-container><label>Text</label><input type='text' ng-model='myText' placeholder='Write text here.'></md-input-container><md-button ng-click='close()'>Close</md-button>",
    })

  };


});

(function() {
  angular
    .module('MyApp')
    .controller('DemoDialogCtrl', DemoDialogCtrl);

  DemoDialogCtrl.$inject = ['$scope', '$rootScope', '$mdDialog'];

  function DemoDialogCtrl($scope, $rootScope, $mdDialog) {


    $scope.close = function() {
      //$rootScope is used only of this demo
      // In real code, there are some …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-material

5
推荐指数
1
解决办法
1232
查看次数

如何使用Ionic Native Storage存储阵列数据?

我打算使用离子本机存储来存储一些翻译历史记录,只要有翻译的单词.翻译操作(日期,翻译单词)将存储在离子本机存储中,当我打开历史页面时,将显示翻译历史列表.

这是我从离子官方网站获得的最基本的代码:

export class HomePage {
  DataArray: Array<string> = [];

  constructor(public navCtrl: NavController, private storage: Storage) {

  }
  // set a key/value
  setData(){
  this.storage.set('age', 'Max');
  }
  // Or to get a key/value pair
  getData(){
  this.storage.get('age').then((val) => {
    console.log('Your age is', val);
  });
}
}
Run Code Online (Sandbox Code Playgroud)

ionic-framework ionic-native angular

5
推荐指数
1
解决办法
8002
查看次数

Angular 4 同一组件之间的动画

我对具有相同组件路径的动画有疑问。例如。我有这条路线:

{路径:'产品/类别/:类别',组件:CategoryComponent},

首先,我解决了路由参数的问题,因为当我在同一组件之间导航时,它们不会刷新 ngOnit() 函数。但现在我已经向我的应用程序添加了动画,并且如果我从 HomeComponent 转到 CategoryComponent,效果会很完美。但是,如果我使用不同的参数从 CategoryComponent 转到 CategoryComponent ,则动画将不起作用。

这是我的动画文件:

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';

// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
  trigger('routeAnimation', [
    state('*',
      style({
        opacity: 1,
        transform: 'translateX(0)'
      })
    ),
    transition(':enter', [
      style({
        opacity: 0,
        transform: 'translateX(-100%)'
      }),
      animate('0.5s ease-in')
    ]),
    transition(':leave', [
      animate('0.5s ease-out', style({
        opacity: 0,
        transform: 'translateY(100%)'
      }))
    ])
  ]);
Run Code Online (Sandbox Code Playgroud)

这是我的 CategoryComponent.ts

import { Component, OnInit, EventEmitter,Input, Output,HostBinding} from '@angular/core';
import { Pipe, PipeTransform …
Run Code Online (Sandbox Code Playgroud)

angular

5
推荐指数
1
解决办法
2320
查看次数

Angular 的 zone.js 是什么,React 的虚拟 DOM 是什么?

Pascal Precht 写了一篇关于 Angular 变化检测的精彩文章。虽然我知道 zone.js 和虚拟 DOM 是完全不同的概念,但 Angular 的 zone.js 相当于 React 的虚拟 DOM 吗?如果是,主要区别是什么,如果否,请简要说明原因。

reactjs virtual-dom zone.js angular

1
推荐指数
1
解决办法
2045
查看次数