小编Ema*_*lta的帖子

md-menu覆盖Angular 2中的默认最大宽度

我正在使用Angular 2,Angular Material,我愿意在md菜单中显示更多数据,因此,我需要将md-menu的max-width设置为更高的值.其默认值为280px.

    <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> 
    <md-menu #appMenu="mdMenu"  [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
        <button md-menu-item >
           <div class="row notification-row"> 
             <div>
               <span class="image-container"> Option 1 </span>
             </div>
           </div>
        </button>
    </md-menu>   
Run Code Online (Sandbox Code Playgroud)

在CSS文件中,我这样做:

.mat-menu-panel.notifications-dropdown {
    max-width:none;
    width: 100vw; 
    margin-left: -8px;
    margin-top: 24px;
    overflow: visible;
}

.notification-row{
    width: 424px;
}
Run Code Online (Sandbox Code Playgroud)

在控制台中,我可以识别设置默认值的类:max-width:280px;当我在控制台中编辑它时,它工作得很好,但即使我尝试在我的CSS代码中覆盖它,我也无法做到这一点.我试过这个,还:

.mat-menu-panel{
    max-width: 600px;
} 
Run Code Online (Sandbox Code Playgroud)

还有这个:

.cdk-overlay-container .mat-menu-panel{
     max-width:600px;
    width: 100vw;
    margin-left: -8px;
    margin-top: 24px;
}
Run Code Online (Sandbox Code Playgroud)

如何覆盖此默认值?

css angular2-template angular-material2

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

onScroll事件触发Angular4中的函数

我试图显示一个分页列表,因为当用户向下滚动时,我想触发一个加载更多项目的函数.但我不能在'scroll'事件上调用该函数.

这就是我的HTML文档的样子:

   <div id="notifications-list"  (scroll)="scrollHandler($event)"  >
       <div class="row notification-row" *ngFor = "let notification of notifications" > 
                ...
       </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

在我的.ts文件中,我有以下内容:

      import { Component, OnInit, ViewChild, ViewEncapsulation, AfterViewChecked, ElementRef,  HostListener  } from '@angular/core';
        @Component({
            selector: 'header-component',
            templateUrl: 'header.component.html',
            styleUrls: ['header.component.css'],
            encapsulation: ViewEncapsulation.None,

        })

        export class HeaderComponent implements OnInit {
         constructor( ...){}


  scrollHandler(event){
    console.log(event);
    console.log('now you are scrolling');
  }
Run Code Online (Sandbox Code Playgroud)

但它不会这样.我的控制台中没有显示任何内容.我尝试过许多其他方式,比如使用@HostListener,但它不起作用:

@HostListener('window:scroll', ['$event']) 
    dotheJob(event) {
      console.debug("Scroll Event", window.pageYOffset );
    }
Run Code Online (Sandbox Code Playgroud)

你能帮我解决这个问题吗?谢谢!:)

html event-handling onscroll typescript angular

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

在不丢失数据或压缩的情况下将 blob 转换为 WAV 文件

我正在录制演讲并将其转换为可下载的 WAV 文件。我正在使用 Angular6 和 MediaRecorder。首先,我获取 blob,然后从 blob 中获取 .wav 文件。问题是 WAV 文件(可以播放并且听起来不错)在此过程中丢失了大部分属性,并且不是有效的 WAV。它一直是一个 WebM 文件。为了进一步处理,我需要真正有效和高质量的 WAV 文件。最后,我得到了 ~20KB 的文件,而不是 ~300KB 的更大文件。

我的代码如下所示:

//convert Blob to File. Pass the blob and the file title as arguments
var blobToFile = (theBlob: Blob, fileName:string): File => {
  var b: any = theBlob;
  //Add properties to the blob
  b.lastModifiedDate = new Date();
  b.name = fileName;
  return <File>theBlob;
}

var browser = <any>navigator;  
var headers = new Headers();  
var audioCtx = new AudioContext();
var …
Run Code Online (Sandbox Code Playgroud)

javascript blob file wav typescript

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

router.navigate更改URL,但未呈现组件

<a href="/my-path/{{my_param}}"></a>我不想在模板中使用,而是愿意使用带有参数的函数将我重定向到页面。

因此,这就是我在.ts文件中构建函数的方式:

redirectToChat(my_param){
    this.router.navigate(['./my-path/' + my_param ]);
}
Run Code Online (Sandbox Code Playgroud)

以及我在模板中的调用方式:

 <div (click)="redirectToChat(my_param)">
    ...
</div>
Run Code Online (Sandbox Code Playgroud)

它更改URL,但不呈现组件。我将此导入到组件中:

import { Router, ActivatedRoute, ParamMap } from '@angular/router';
Run Code Online (Sandbox Code Playgroud)

我在构造函数中使用了它: private router: Router

您可以帮助我正确渲染组件吗?我还能如何使用功能将用户重定向到页面?

url-redirection angular-ui-router angular2-routing angular

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

PassportJs 身份验证无限循环和执行(默认)查询

我正在尝试使用 PassportJs 和 Sequelize 构建身份验证系统。我自己制作了注册系统,使用Sequelize。我只想将 PassportJS 用于登录。

它不会将我重定向到 failureRedirect 路由,也不会重定向到 SuccessRedirect 路由,但是在提交表单时它会进入无限循环,并且在我的控制台中,会出现以下消息:

 Executing (default): SELECT `id`, `username`, `lastName`, `password`,  `email`, `phone`, `createdAt`, `updatedAt` FROM `user` AS `user` LIMIT 1;   
Run Code Online (Sandbox Code Playgroud)

我的项目结构如下: users_model.js 、 index.js 和 users.js (控制器)。

我的 index.js 中的代码如下所示:

//===============Modules=============================
var express = require('express');
var bodyParser = require('body-parser');   
var session = require('express-session');
var authentication= require('sequelize-authentication');
var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;
var passportlocal= require('passport-local');
var passportsession= require('passport-session');

var User = require('./models/users_model.js');


passport.use(new LocalStrategy(
  function(username, password, done) {
    User.findOne({ …
Run Code Online (Sandbox Code Playgroud)

authentication node.js express sequelize.js passport.js

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

如何从 Angular 6 中的 blob URL 下载音频文件?

我试图在录制 2500 毫秒后生成一个音频文件(.mp3 格式)。我正在使用navigator并且主要使用HTML5音频。我正在生成一个用于下载该文件的链接。 window.URL.createObjectURL(stream)返回blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39。我不知道如何将其转换为能够下载的文件。

录音功能是这样的:

  this.record = () => {     
      var headers = new Headers();
      var browser = <any>navigator;      
      var obj = {
        audio: true,
        sampleSize: 16
      };

      var audio = document.createElement('audio');      

      browser.getUserMedia = (browser.getUserMedia || browser.webkitGetUserMedia || browser.mozGetUserMedia || browser.msGetUserMedia);
      browser.mediaDevices.getUserMedia(obj).then(stream => {            
        setTimeout(function(){        
          var track = stream.getTracks()[0]; 
          var source = window.URL.createObjectURL(stream);   // returns blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39
          audio.src = source;      
          audio.autoplay= true; 
          var link = document.createElement("a");
          link.href = source;
          link.download = 'audio_recording_' + new Date().getTime() …
Run Code Online (Sandbox Code Playgroud)

audio blob html5-audio typescript angular6

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