refactor(tree): avoid improper query usage

The way things are set up at the moment we have a `CdkNestedTreeNode` which uses a `ContentChildren` to find a `CdkTreeNodeOutlet` so that it knows where to render its content. On top of this we have a `MatNestedTreeNode` which extends `CdkNestedTreeNode` and defines it's own query at the same property, but looking for a `MatTreeNodeOutlet`. With this setup it means that both `CdkNestedTreeNode` and `MatNestedTreeNode` are trying to write to the same `nodeOutlet` property and it's by pure coincidence that it works. This is very fragile and it isn't guaranteed to work in future versions of the framework.

These changes fix the issue by removing the query from the `MatNestedTreeNode` and providing the `MatTreeNodeOutlet` as a `CdkTreeNodeOutlet` so that the query on the `CdkNestedTreeNode` can pick it up.

Author: crisbeto

src/material/tree/node.ts

@@ -16,13 +16,11 @@ import {
 import {
   AfterContentInit,
   Attribute,
-  ContentChildren,
   Directive,
   ElementRef,
   Input,
   IterableDiffers,
   OnDestroy,
-  QueryList,
 } from '@angular/core';
 import {
   CanDisable,
@@ -33,8 +31,6 @@ import {
   mixinTabIndex,
 } from '@angular/material/core';
 
-import {MatTreeNodeOutlet} from './outlet';
-
 const _MatTreeNodeMixinBase: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNode =
     mixinTabIndex(mixinDisabled(CdkTreeNode));
 
@@ -106,14 +102,6 @@ export class MatNestedTreeNode<T> extends _MatNestedTreeNodeMixinBase<T> impleme
     AfterContentInit, CanDisable, HasTabIndex, OnDestroy {
   @Input('matNestedTreeNode') node: T;
 
-  /** The children node placeholder. */
-  @ContentChildren(MatTreeNodeOutlet, {
-    // We need to use `descendants: true`, because Ivy will no longer match
-    // indirect descendants if it's left as false.
-    descendants: true
-  })
-  nodeOutlet: QueryList<MatTreeNodeOutlet>;
-
   constructor(protected _elementRef: ElementRef<HTMLElement>,
               protected _tree: CdkTree<T>,
               protected _differs: IterableDiffers,

src/material/tree/outlet.ts

@@ -18,7 +18,11 @@ import {
  * inside the outlet.
  */
 @Directive({
-  selector: '[matTreeNodeOutlet]'
+  selector: '[matTreeNodeOutlet]',
+  providers: [{
+    provide: CdkTreeNodeOutlet,
+    useExisting: MatTreeNodeOutlet
+  }]
 })
 export class MatTreeNodeOutlet implements CdkTreeNodeOutlet {
   constructor(

tools/public_api_guard/material/tree.d.ts

@@ -3,7 +3,6 @@ export declare class MatNestedTreeNode<T> extends _MatNestedTreeNodeMixinBase<T>
     protected _elementRef: ElementRef<HTMLElement>;
     protected _tree: CdkTree<T>;
     node: T;
-    nodeOutlet: QueryList<MatTreeNodeOutlet>;
     constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T>, _differs: IterableDiffers, tabIndex: string);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;