小编Mar*_*oLe的帖子

以下用例：假设我有一个具有以下属性的对象：

const objOne = {
  car: 'ford',
  location: 'Munich',
  driver: 'John'
}

和第二个 Obj 只具有第一个 Obj 的一些属性：

const objTwo = {
  car: 'BMW',
  driver: 'Marta'
}

有没有办法在不丢失第一个 obj 的属性的情况下将第二个 obj 的属性分配给第一个 obj。在这种情况下location: 'Munich'。我知道事实上有一种方法，Object.assign但这种方法完全复制了目标 obj，我显然不想这样做。

我想为照片上传方法编写单元测试。但我得到了Failed: this.task.snapshotChanges(...).pipe is not a function TypeError: this.task.snapshotChanges(...).pipe is not a function错误。

为了这个问题的简单起见，我将代码全部放在一种方法中：

成分

  public startUpload(event: FileList) {
    const file: File = event.item(0);
    const pathRef = `users/${this.uid}`;

    this.task = this.service.uploadPhoto(pathRef, file);
    this.fileRef = this.service.getFileReference(pathRef);
    this.percentage = this.task.percentageChanges();
    this.snapshot = this.task.snapshotChanges();
    this.task.snapshotChanges().pipe(last(), switchMap(() => // it fails here - need to propperly mock this
    this.fileRef.getDownloadURL()))
      .subscribe(url => this.service.updatePhoto(url));
  }

组件.spec

  it('should upload file', async(() => {
    const supportedFile = new File([''], 'filename.png', {type: 'image/', lastModified: 2233});
    const fileList = …

目前我有三个不同的模块：

• App 模块 -- 带有 emtpy 一个数组 Root 配置
• 主页模块 - 带有主页 comp 的 '' 路径配置。用于搜索玩家
• 玩家结果模块——显示搜索结果（玩家统计信息或错误页面）

现在在这个玩家搜索模块中，我有一个带有子组件的玩家搜索结果组件。其中一个子组件是一个带有列表的模式。如果我单击此列表项（播放器），它应该“导航”到父组件并更新其视图。但唯一更新的是 url。

有一种解决方法可以window.location.href(url)在导航方法更新 url 后重新加载页面。但我不喜欢变通办法。

父组件几乎看起来像：

export class PlayerSearchResultComponent implements OnInit, AfterViewInit {

 public isLoading = true;
  public searchValue: string;
  public playerResult: PlayerByPlayerTagType;
  public hasNoResultFound = false;
  public clanInfo: ClansByClantagType;

  constructor(private playerSearchService: PlayerSearchService,
              private activatedRoute: ActivatedRoute,
              private clanSearchService: ClanSearchService) {
  }

  ngOnInit(): void {
    this.activatedRoute.params.subscribe((params: Params) => {
      this.searchValue = params['playerId'];
    });
  }

  ngAfterViewInit() {
    this.playerSearchService.getPlayerByPlayerTag(this.searchValue).subscribe(player => {
        this.playerResult = player; …

我有2个属性的服务：

服务

...
public usernameAnnounced;
private username: Subject<string> = new Subject<string>();

constructor() {
    super();
    this.usernameAnnounced = this.username.asObservable();
}

我要在组件上订阅该属性：

零件

    public ngOnInit(): void {
    this.service.usernameAnnounced.subscribe((username: string) => {
        this.username = NavbarComponent.capitalizeFirstLetter(username);
    });
}

我发出另一个组合的用户名。但是与这个问题无关。现在，我想模拟usernameAnnounced，但遇到困难。我试过了spyOn，结果是：“ usernameAnnounced不是一个函数。” 与spyOnProperties它抛出我：“属性不是一个getter”。

经过测试的comp。

到目前为止，我的方法如下所示：

    beforeEach(async(() => {
    TestBed.configureTestingModule({
        ...
        declarations: [NavbarComponent],
        providers: [
            ...,
            {provide: service, useValue: authenticationMock}
            ]
        })
        .compileComponents();

    fixture = TestBed.createComponent(NavbarComponent);
}));
...
    it('should render username',() => {
    const underTest = fixture.componentInstance;

    spyOnProperty(authenticationMock, 'usernameAnnounced').and.returnValue({
            subscribe: () => {'boboUser'}}); <== …

我有一个核心服务，它获取 obj 的实例firebase.auth并使用 getter 返回它。它很简单，如下所示：

export class AuthService {

  ...
  constructor(private afAuth: AngularFireAuth,
              private afs: AngularFirestore) {
  ...
}

  public getAuthInstance(): FirebaseAuth {
    return this.afAuth.auth;
  }
}

现在我有一个 LoginService 需要 AuthService 来登录我的应用程序。

export class LoginService {

  constructor(private authService: AuthService) {
  }

  public login(email, password): Promise<UserCredential | string> {
    return this.authService.getAuthInstance().signInWithEmailAndPassword(email, password)
      .catch(() => Promise.reject('Login failed.'));
  }

也不要太复杂。但现在我想测试我的登录组件。- 特别是login方法。我无法嘲笑signInWithEmailAndPassword。我基本上尝试了一切：

• jasmine.spies
• 自己创建的假对象。

测试类如下所示：

  ...
  const authStub: AuthService = jasmine.createSpyObj('AuthService', ['getAuthInstance']);
  const fireStub = {
    auth: { …

我几乎没有问题，可以将Angular应用程序从4升级到6。只有这个令人讨厌的警告出现在控制台中：

WARNING in ./node_modules/sax/lib/sax.js
Module not found: Error: Can't resolve 'stream' in 'D:\user\app\node_modules\sax\lib'

我已经尝试删除node_modules指令并执行，npm install但是错误仍然出现。香港专业教育学院也试图添加

"paths": {
        "sax": [
            "../node_modules/sax/lib/sax.js"
        ]
    }

进入我的tsconfig.json文件。没有任何帮助。此外，通过谷歌搜索我还没有找到一个有用的解决方案。有谁知道得更好吗？

编辑

应该提到的是Im确切使用的依赖项：

"dependencies": {
    "@angular/common": "6.1.3",
    "@angular/compiler": "6.1.3",
    "@angular/core": "6.1.3",
    "@angular/forms": "6.1.3",
    "@angular/http": "6.1.3",
    "@angular/platform-browser": "6.1.3",
    "@angular/platform-browser-dynamic": "6.1.3",
    "@angular/router": "6.1.3",
    "ag-grid": "^15.0.0",
    "ag-grid-angular": "^15.0.0",
    "angular2-multiselect-dropdown": "^2.5.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "enhanced-resolve": "^3.3.0",
    "ngx-bootstrap": "^2.0.1",
    "ngx-cookie-service": "^1.0.10",
    "rxjs": "6.2.2",
    "tinymce": "^4.6.3",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@PB/tslint-rules": "^0.7.0",
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "^6.1.3", …

我想使用 rxjs 为我的网站实现一个滚动侦听器。监听器当前发出每个scrollY 数字。是否可以实现一个滚动侦听器，如果数字高于以前，则仅发出滚动位置而不存储状态属性。我只想通过运营商来解决这个问题。当前的实现如下所示：

  public lastScrolledHeight: number = 0;
  ...
  public ngOnInit() {
    this.listenForScroll()
      .subscribe(scrollHeight => {
        this.showAddButton = this.lastScrolledHeight >= scrollHeight; // true or false
        this.lastScrolledHeight = scrollHeight;
      });
  }

  private listenForScroll(): Observable<number> {
    return fromEvent(window, 'scroll').pipe(
      debounceTime(25),
      map((e: any) => e.path[1].scrollY)
    );
  }

提示

一种方法已经可以是添加startsWith(0)操作员。这会将初始位置发送到 0。但是如果或scan()会有所帮助，我不知道。filter()reduce()

用例

我向下滚动到 Y=300。应发出 300 个。我向上滚动到 Y= 50。不应发出任何内容。我再次向下滚动到 150，应该发出 150。

我有一个简单的打字稿类,想要在提交时显示输入结果.尽管这个问题已经被问到,但是event.preventDefault()没有用.也许你可以给我一些提示？

class LoginPanel {

    public appDiv: HTMLElement = document.getElementById('app');

    constructor() {
        this.setForm();
        let btn = document.getElementById('loginButton');
        btn.addEventListener('submit', (event) => {event.preventDefault(); this.submitForm()});
    }

    public setForm(): void {
        this.appDiv.innerHTML = `<form id="loginForm" class="form-signin mt-5">
      <div class="text-center">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      </div>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control mt-1" placeholder="Password" required="">
      <button id="loginButton" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
    `;
    }

    public submitForm(): void { …

我尝试为 mui-app-bar 使用伪类。我在这里阅读了一些关于它的问题。但它并没有让我更进一步。我的组件如下所示：

const styles = (theme: Theme) => createStyles({
    appBar: {
        backgroundColor: theme.palette.background.default,
        height: '48px',
        '&::before': {
            content: "",
            position: 'absolute',
            left: '2.5%',
            bottom: 0,
            right: '2.5%',
            width: '95%',
            borderBottom: '1px solid magenta',
        }
    }
});

class TabBar extends React.Component<WithStyles<typeof styles> & WithTranslation, TabBarInterface> {
...
render() {
        const { classes } = this.props;
        ...

        return (
                <AppBar className={classes.appBar} position="relative">
                  ...
                </AppBar>

        );
    }
}

export default withStyles(styles)(withTranslation()(TabBar));

编辑

用一个冒号应用伪类对我来说也不起作用。

我有一个滚动窗口对象的事件绑定。每次我滚动时都会正确触发。到目前为止，一切正常。但是setNavState函数（这是我的setState函数）不会更新我的状态属性。

export default function TabBar() {
    const [navState, setNavState] = React.useState(
        {
            showNavLogo: true,
            lastScrollPos: 0
        });

    function handleScroll(e: any) {
        const currScrollPos = e.path[1].scrollY;
        const { lastScrollPos, showNavLogo } = navState;

        console.log('currScrollPos: ', currScrollPos); // updates accordingly to the scroll pos
        console.log('lastScrollPos: ', lastScrollPos); // last scroll keeps beeing 0
        if (currScrollPos > lastScrollPos) {
            setNavState({showNavLogo: false, lastScrollPos: currScrollPos});
        } else {
            setNavState({showNavLogo: true, lastScrollPos: currScrollPos});
        }
    }

    useEffect(() => {
        window.addEventListener('scroll', handleScroll.bind(this));
    }, []);

   ...
   }

所以我的问题是如何在此示例中如何使用react钩子更新我的状态属性？